Sass的知识点梳理

最新推荐文章于 2025-02-13 09:18:45 发布

原创最新推荐文章于 2025-02-13 09:18:45 发布 · 907 阅读

0 ·

CC 4.0 BY-SA版权

Css 专栏收录该内容

6 篇文章

订阅专栏

变量

变量的声明

使用$来声明，例如

$width:200px;
div{
  width:$width;
}

编译后为：

div{
    width:200px;
}

变量的作用域

这里和 js 差不多，但是没有变量提升的概念，必须先定义，再使用。
如果变量名相同，后面定义的会覆盖前面的，但是含有default的优先级最低，就算同名的default的变量放在下面，也不会覆盖前面定义的同名变量。
示例：

$width : 200px;
$bg-color:red; // 此处优先级比有default的高。
$bg-color:#f40 !default; // 定义一个默认值。
div{
    background-color:$bg-color; // 编译后是red而不是#f40
    $width:300px;
    span{
        width:$width; // 此处不是200px , 而是 300px
    }
}

变量的数据类型

数字 number : 分为带单位的，和不带单位的，如： 1、 .2、 13%、 10px；
字符串 string：有引号字符串或无引号字符串，如： “foo”、 ‘bar’、 hi
颜色 color：如： blue、 #04a3f9、rgb(255,0,0)、 rgba(255,0,0,0.5)；
布尔型 bool ，如：true、 false；
空值 null，如：null；
值列表 list：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

注释

// 这种注释 编译后会消失 
/* 这种注释 ，编译后存在，压缩后会消失  */
/*!  多用于类库的信息的注释  编译压缩都会存在   */

嵌套

用于节约代码，方便管理。

ul{
    color:#333;
    li{
        border:1px solid red;
        margin:{
            top:2px;
            bottom:3px;
            left:2px;
        }    
    }  
    a{
        background-color: #f1f1f1;
        &:hover{ // & 表示父级选择器 和js 中的this挺像的。
            background-color: #f3f3f3;
        }
        &::after{
            content:"aa";
        }
    } 
    > span{ // > 代表直接子代选择器
        color:blue;
    }
}

编译后为：

ul {
  color: #333;
}
ul li {
  border: 1px solid red;
  margin-top: 2px;
  margin-bottom: 3px;
  margin-left: 2px;
}
ul a {
  background-color: #f1f1f1;
}
ul a:hover {
  background-color: #f3f3f3;
}
ul a::after {
  content: "aa";
}
ul > span {
  color: blue;
}

一目了然

继承

使用@extend来继承已存在的类样式块
示例：

.btn{
    color:red;   
 }

 .btn-primary{
    border:1px solid #ddd;
    @extend .btn;  // 此处使用@extend来继承.btn类中的内容
 }

编译后为：

.btn, .btn-primary {
  color: red; 
}

.btn-primary {
  border: 1px solid #ddd; 
}

占位符 placeholder

使用%来定义占位符,不会在页面中生成btn这个类。
示例：

%mt5{
    margin-top:5px;    
}
%pt5{
    padding-top:5px;   
}

.box1{
    width:100px;   
    @extend %mt5;
    @extend %pt5;
}

编译后

.box1 {
  margin-top: 5px;
}

.box1 {
  padding-top: 5px;
}

.box1 {
  width: 100px;
}

缺点：重复的类出现代码冗余，但是定义的placeholder不会显示在编译后的代码中。

混合宏 Mixin

@mixin 声明一个混合宏
@include 调用一个混合宏

示例：

@mixin border-radius($border:10px){
    border-radius:$border;
    -webkit-border-radius:$border;    
    -ms-border-radius:$border;
    -moz-border-radius:$border;
    -o-border-radius:$border;
}

.btn{
    @include border-radius();   
}

.btn1{
    @include border-radius(5px);   
}

编译后

.btn {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
}

.btn1 {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
}

可以看到Mixin 中，可以传递值，作为默认的参数，同样的也可以传递多个参数，如下：

@mixin border-radius($a,$b){
    border-radius:$a;
    -webkit-border-radius:$a;    
    -ms-border-radius:$a;
    -moz-border-radius:$a;
    -o-border-radius:$a;
    width:$b;
}


.btn1{
    @include border-radius(5px,6px);   

}

编译后

.btn1 {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  width: 6px;
}

其中，形参和实参要对应，并且有多少形参，Mixin里面就要引用多少形参，不然会报错。

Sass 里面比较复杂的混合宏，这里不做讨论 ..

此时来比较一下混合宏，继承 , 占位符

	混合宏	继承	占位符
声明方式:	@mixin	.classname	%holdername
调用方式:	@include	@extend	@extend
使用环境:	用于相同代码块的传值	会编译被继承的类	占位符不被编译