css：scss基本使用

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件

目录
一、变量
二、嵌套
三、引入
四、混合
五、继承
六、if / else / each /for
七、插值、注释

一、变量

1、变量以 $ 开头，用来存储一些在css中需要复用的参数；
2、变量存在作用域，内部声明的变量无法在外面使用，外部如需引用内部的变量，可在变量值的后面添加!global声明;
3、变量名中，中划线等同下划线，值会被第二次定义的变量覆盖。

scss代码

$color = #333;
$bac_color = #222;
$bac-color = #111;

.main{
	color : $color;
	background: $bac_color;/*$bac_color被$bac-color覆盖*/
	}

编译后：

.main{
	color : #333;
	background: #111;
	}

二、嵌套

nav ul{list-style: none;}
nav li{display: inline-block;}

这是一个网站导航例子，使用scss编写可以提取出相同父元素nav，把ul和li都嵌在nav选择器中使用，改成scss代码如下：

nav {
  ul {list-style: none;}
  li { display: inline-block; }
}

三、引入

1、scss通过 @import 可以把多个文件结合到一起；
2、以 _开头命名的文件不会直接生成为CSS文件，只在使用@import指令的位置被导入；
3、可全局引入或局部引入；
4、scss中引入片段时，可以缺省文件扩展名；
4、css原生的@import会通过额外的HTTP请求获取引入的样式片段，而scss的@import则会直接将这些引入的片段合并至当前CSS文件，并且不会产生新的HTTP请求。

/*_one.scss*/
nav {
  ul {list-style: none;}
  li { display: inline-block; }
}

/*two.scss*/
@import '_one' /*全局导入，缺省后缀*/

.main{
	@import '_one'/*局部导入*/
	color : #333;
	background: #111;
	}

四、混合

1、通过 @mixin 定义一个类或方法，在其它位置通过 @include 引用这个类或方法
2、@mixin 如果没有调用，不会被渲染
3、多个参数时，传参指定参数的名字，可以不用考虑传入的顺序

@mixin border-radius($radius：5px) {  /*设置默认值为5px*/
   border-radius: $radius;
   -ms-border-radius: $radius;
   -moz-border-radius: $radius;
   -webkit-border-radius: $radius;
}
.box {
  @include border-radius(); /*未传参数，默认值为5px*/
}
.box1 {
  @include border-radius(10px); /*传入参数，值为10px*/
}

编译后：

.box {
   border-radius: 5px;
   -ms-border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}
.box1 {
   border-radius: 10px;
   -ms-border-radius:10px;
   -moz-border-radius: 10px;
   -webkit-border-radius:10px;
}

五、继承

1、使用%定义一个被继承的样式，它本身不起作用，只用于被其他人继承
2、样式如果没有被继承，不会输出到最终生成的CSS文件
3、注意，不能继承 @extend .box .main 这种连续组合的类，应该写为 @extend .box, .main

%err-color {
	color:red;
}

.errBox{
	@extend %err-color;
	padding: 10px;
}
.errBox2{
	@extend %err-color;
	padding: 5px;
}

编译后：

.errBox, .errBox2{
	color:red;
}
.errBox{
	padding: 10px;
}
.errBox2{
	padding: 5px;
}

六、if / else / each / for

1、@if 和 @else

@if 条件为真 {
  //code
} @else {
  //code
}

2、 @each
遍历变量所存在的所有数据。

@each $color in red, green, yellow, blue {
  .p_#{$color} { /*插值，第七点会讲到*/
    background-color: #{$color};
  }
}

编译后：

.p_red { background-color: red; }

.p_green { background-color: green; }

.p_yellow { background-color: yellow; }

.p_blue { background-color: blue; }

3、@for循环
(1) 关键字 through 表示包括终点值这个数，
(2) 关键字 to 不包括终点值这个数。

@for $i from 1 through 3 { /*through  包括3这个终点值*/
  .item-#{$i} { 
 	 width: 2px * $i;
   }
}

编译后：

.item-1 {
  width: 2px;
}
.item-2 {
  width: 4xp;
}
.item-3 {
  width: 6px;
}

七、其他

1、插值
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性名称或在某些特殊情况下则必须要以 #{$XXX} 形式使用。

如下，变量作为属性名的情况使用插值的形式使用

@each $color in red, green, yellow, blue {
  .p_#{$color} { /*插值，第七点会讲到*/
    background-color: #{$color};
  }
}

2、注释
(1) 使用//注释的内容编译后不存在
(2) 使用/* */注释的内容编译后会存在css文件中

本文地址：https://blog.csdn.net/weixin_41981909/article/details/107354937