scss 入门基础

在一个项目中，样式是必不可少的一部分，而对于一个完整的项目来说是有个基准色调的。在项目需求变化不大的情况下，可以直接在css中写这些颜色值之类的东西。但是如果遇到一个朝令夕改的领导或者甲方，那会变得相当惨。

因此，在项目中使用预编译语言就显得很有效率，且简单。目前项目中就使用 scss 预编译语言。

首先区分一下：Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。　　这是中文官网。

1、变量

我们可以把基准色调设置成变量，或者一些常用到的颜色。比如：

1 $bg_color: #ededed; // 背景色
2 $text_color: #333; // 文字颜色
3 $margin_bottom: 40upx; // 各个条目的下边距

2、使用变量

.content {
    background-color: $bg_color;
    flex-direction: column;
    color: $text_color;
}

当基准色调改变，或者整体样式变化时，就不用一个一个去找，直接改变，变量的值，之后再重新编译就可以了。

3、嵌套规则

原来写法：

.content {
    background-color: #ededed;
    flex-direction: column;
}

.content .list {
    width: 400upx;
    color: #ff0;
}

.content .list image {
    width: 60upx;
    height: 60upx;
}

scss 嵌套规则写法：

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        width: 400upx;
        color: #ff0;
        
        image {
            width: 60upx;
            height: 60upx;
        }
    }
}

4、父选择器的标识符 &

可能主要是用于一些伪类选择器。看例子：

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        
        &:hover {
            background-color: #ff0;
            color: #fff;
        }
        
    }
}

编译之后：

.content {
    background-color: #ededed;
    flex-direction: column;
}

.content .list:hover {
    background-color: #ff0;
    color: #fff;
}

另一个例子：

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        
        a &:hover {
            background-color: #ff0;
            color: #fff;
        }
        
    }
}

编译后：

.content {
    background-color: #ededed;
    flex-direction: column;
}

a .content .list:hover {
    background-color: #ff0;
    color: #fff;
}

由此可以看出 & 代表的是父级的整体选择器。

5、群组选择器的嵌套，直接看代码

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        
        .name, .age, .sex {
            margin-bottom: 40upx;
        }
        
    }
}

编译后：

.content {
    background-color: #ededed;
    flex-direction: column;
}

.content .list .name,
.content .list .age,
.content .list .sex {
    margin-bottom: 40upx;
}

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

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        
        ~ .name {
            color: #ff0;
        }
        + .age {
            font-size: 40upx;
        }
        > .sex {
            margin-bottom: 40upx;
        }
        
    }
}

编译后：

.content {
    background-color: #ededed;
    flex-direction: column;
}

.content .list~.name {
    color: #ff0;
}

.content .list+.age {
    font-size: 40upx;
}

.content .list>.sex {
    margin-bottom: 40upx;
}

7、嵌套属性

.content {
    background-color: $bg_color;
    flex-direction: column;
    
    .list {
        border: {
            style: solid;
            width: 2px;
            color: #f00;
        }
    }
    
    .title {
        border: 1px solid #4cd964 {
            left: 2px;
            bottom: 10px;
        }
    }
}

编译后：

.content {
    background-color: #ededed;
    flex-direction: column;
}

.content .list {
    border-style: solid;
    border-width: 2px;
    border-color: #f00;
}

.content .title {
    border: 1px solid #4cd964;
    border-left: 2px;
    border-bottom: 10px;
}

8、默认变量值 !default

$text_color: #333 !default;

这句的意思是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

这种一般用来处理，引入的 scss 文件是否会有你生命的变量，如果有，则用引入的，如果没有，则使用默认的 #333；有点儿类似于 js 声明变量时候的兜底行为。

9、规则内引入 scss 文件

　　举例说明，有一个名为_blue-theme.scss的局部文件，内容如下：

aside {
  background: blue;
  color: white;
}

引入文件：

.blue-theme {@import "blue-theme"}

编译后：

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

10、混合器 @mixin

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

使用：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

编译后：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

混合器中不仅可以包含属性，还可以包含规则。

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

使用：

ul.plain {
  color: #444;
  @include no-bullets;
}

编译后：

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

11、给混合器传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

使用：

a {
  @include link-colors(blue, red, green);
}

编译后：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，scss允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

12、默认参数值

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

13、使用选择器继承来精简css，使用：@extend

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

不只继承 .error 自己，和它相关的也继承

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

了解了这些就算是简单入门了，至少已经让你的css省时省力好多了，想要深入研究就多看官网吧。后面学习到再做总结。

猜你喜欢