sass入门

十七日尾
438 阅读4分钟

前言

Sass是一款强化 CSS 的辅助工具，完全兼容所有版本的CSS，所以可以无缝地使用任何可用的CSS库，且拥有比其他任何CSS扩展语言更多的功能和特性。

一、变量引用

sass 为 css 引入了变量，可以把反复使用的 css 属性值，定义成变量，然后通过变量名进行引用，就无需重复书写这一属性值。 声明: 使用 $ 符号声明变量。

// 变量的声明
$x: 100px;
$y: 100px;
// 变量值也可以再次引用其它变量
$red:red;
$border:1px solid $red;

div{
    // 变量的引入
    width: $x;
    height: $y;
    border: $border;
}

//编译后：
div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

二、嵌套CSS规则

.box p{
    color: $red;
}
.box span{
    color: $red;
}

当多个元素处于同一个父选择器的时候，每次书写样式都要重复加上父选择器作前缀, sass 可以实现只书写一遍，在输出 css 时会自动把嵌套规则处理好。

.box{
    p,span{
        color: $red;
    }
}

//编译后：
.box p, .box span {
  color: red;
}

2.1 父选择器的标识符 &

sass 在解开一个嵌套规则时，是按照后代选择器的形式，即通过空格连接父选择器和子选择器。在大多数情况下简单的嵌套都是没有问题的，但是有些场景下，比如想要在嵌套的选择器使用伪类，是行不通的。

a{
    text-decoration: none;
    :hover{
        color: red;
    }
}
//编译后
a :hover {
  color: red;
}

比如想让a标签在鼠标悬浮之上时，颜色为红色，使用以上书写方式并不能实现效果。因为:hover是需要紧跟在选择器之后的，如果以空格隔开，效果就应用到了其所有子元素上。为了解决这种以及其他情况，sass 提供了一个特殊结构 & 。当包含父选择器标识符 & 的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是用父选择器直接替换 & 。

a{
    text-decoration: none;
    &:hover{
        color: red;
    }
}
//编译后
a:hover {
  color: red;
}

2.2 群组选择器的嵌套

//同一父元素下不同子元素样式
.box{
    h1,h2,h3{
        color: red;
    }
}
//编译后
.box h1, .box h2, .box h3 {
  color: red;
}


//不同父元素有相同子元素样式
.box,.box2{
    p{
        color: red;
    }
}
//编译后
.box p, .box2 p {
  color: red;
}

2.3 子组合选择器和同层组合选择器：>、+ 和 ~

    <p>p标签</p>
    <ul>
        <li><p>ul-li-p</p></li>
        <li><p>ul-li-p</p></li>
    </ul>
    <p>p标签</p>
    <p>p标签</p>

ul{
    li > p{
        background-color: salmon;
    }
    +p{
        color: red;
    }
    ~p{
        padding-left: 20px;
    }
}

image.png

三、混合器

当需要大段大段的重复样式时，可以通过 sass 的混合器实现。

  • 声明：混合器使用 @mixin 标识符定义，用标识符给一大段样式赋予一个名字，然后就可以通过引用这个名字复用这段样式。

  • 使用：通过 @include 来使用这个混合器， @include 调用会把混合器中的所有样式提取出来放在被调用的地方。

3.1 基本语法

//    声明混合器
@mixin border-radius{
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}
//    使用混合器
div{
    @include border-radius;
}

使用混合器会生成以下代码：

div {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

3.2 混合器中不仅可以包含属性，也可以包含css规则：

@mixin border-radius{
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    span{
        color: red;
    }
}
//编译后
div {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

div span {
  color: red;
}

image.png

3.3 混合器支持传参

混合器并不一定总得生成相同的样式。可以在 @include 混合器时给混合器传参，来定制混合器生成的精确样式，参数其实就是可以赋值给 css 属性值的变量。

  • 传参数时可以一一对应进行传参；也可以通过语法：$name:value 指定每个参数值，使用这种形式传参，是无顺序的，只需注意不要漏掉参数。

  • 可以给参数指定一个默认值。参数默认值使用 $name: default-value 的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用。

@mixin border($w,$s,$c:black){
    border: $w $s $c;
}

div{
    //一一对应
    @include border(1px,solid,red);
    //指定
    @include border($w:1px,$s:solid,$c:red);
    //有默认值 可以不必要传入所有参数
    @include border(1px,solid);
}

四、导入SASS文件

sass 有一个导入 @import 规则，它允许在一个 sass 文件中导入其他 sass 文件。在生成 css 文件时把相关文件导入进来,意味着所有相关的样式被归纳到了同一个 css文件中。在被导入文件中定义的所有变量和混合器节均可在导入文件中使用。 导入语法： @import "被导入文件" ，注意被导入文件要写在引号内。使用 sass 的@import 规则并不需要指明被导入文件的全名，可以省略文件后缀。

// a2.scss 被导入的文件
$red:red;
$w:100px;
$h:100px;

// a.scss 导入  
@import "./a2";
div{
    width: $w;
    height: $h;
    border: 1px solid $red;
}

image.png

五、静默注释

sass 另外提供了一种不同于 css 标准注释格式 /* ... */ 的注释语法，即静默注释 // ，其内容不会出现在生成的 css 文件中。

// 这种注释内容不会出现在生成的css文件中
/* 这种注释内容会出现在生成的css文件中 */

六、继承

sass 可以使用选择器继承来精简CSS，即一个选择器可以继承另一个选择器定义的所有样式。通过 @extend 语法实现。使用继承不仅会继承被继承选择器自身的所有样式，任何跟被继承选择器有关的组合选择器样式，继承者也会以组合选择器的形式继承下来。

.box1{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin-top: 10px
}
.box1 a{
    color: red
}
// .box2会继承.box1所有样式及其有关的选择器样式
.box2{
    @extend .box1;
}

image.png

avatar
文章
阅读
粉丝