不一样的css，sass(scss)的基本使用

前言

此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。

基础内容

1.变量

 /*scss*/ 
//声明变量
$primary-color:#1269b5;

//使用变量
div.box{
    background-color: $primary-color;    
}

 /*css*/ 
div.box{
    background-color:#1269b5;    
}

2.嵌套

• 后代

 /*scss*/ 
.nav {
  height: 100px;
  ul {
    margin: 0; 
    li {
     float: left;
     list-style: none;
     padding: 5px;
      }
   }
}

 /*css*/
.nav{
    height: 100px;
}

.nav ul{
    margin: 0;
}

.nav ul li {
    float: left;
    list-style: none;
    padding: 5px;
}

• 嵌套时调用父选择器 (父子)

  使用&的地方会使用父选择器

 /*scss*/ 
 .nav {
   & &-text {
      font-size: 15px;
        &:hover{
          color: blue;
       }
    } 
 }
 
  /*css*/ 
 //父子层级的
 .nav .nav-text{
    font-size: 15px; 
 }
 
 .nav .nav-text:hover{
    color: blue;
 }

• 属性的嵌套

 /*scss*/ 
 .nav {
   border: 1px solid #000 {
     left:0;
     right:0;
    }
  }
 
 /*css*/ 
 .nav {
     border: 1px solid #000;
     border-left: 0;
     border-right: 0;
  }
 

3.混合

/*scss*/ 
 //声明一个setColor的混合
 @mixin  setColor ($text-color,$background) {
  color:$text-color;
  background-color:$background;
    .text {
      color: darken($text-color,10%); //在原来颜色的基础上加深10%
     } 
  }
  
 .content{
     //使用这个混合
    @include  setColor(#fefefe,#969696)
  }
 
 /*css*/
 .content {
    color: #fefefe;
    background-color: #969696;
  }

 .content .text{
    color: #e5e5e5;
 }
 

tips: setColor是名称,传递的参数一定要带$，和变量一样;

4.继承

继承时也会继承和被继承的类相关的选择器样式

/*scss*/ 

 .content {
     padding: 15px;
 }
 
 .content a {
     font-weight: bold;
 }

 .content-info {
     @extend .padding;
     color: #969696;
 }
 
 /*css*/ 
 
 .content , .content-info{
      padding: 15px;
    }

 .content a ,  .content-info a{
      font-weight: bold;
   }
   
 .content-info {
      color: #969696;
   }
   

5.Partials和@import

• 被引入的文件，Partials文件，以下划线开头，不会被编译。

  _base.scss

  body {
     margin: 0;
     padding: 0;
  }
  

other.scss

  /*scss*/ 
 @import "base";
  .a {
    color: #969696;
  }
 
  /*css*/
   body {
     margin: 0;
     padding: 0;
   }
  
  .a{
    color: #969696;
   }
   

6.注释

 //这是单行，不会出现在css里面
 /*这是多行，会包含在没有压缩之后的css里面*/
 /*!这是强制输出注释内容*/

7.列表

• 用空格或逗号分隔开的就是列表,类似其他语言的数组

padding: 5px 10px;

border: 1px solid red;

• 列表函数

length(5px 10px) //2  获取长度

nth(5px 10px,1) //5px  获取序号 从1开始

index(1px solid red,solid) //2  获取下标从0开始

append(5px 10px,5px) // (5px 10px 5px)   添加 

join (5px 10px ,5px 0) //(5px 10px 5px 0) 组合成新的列表

join (5px 10px ,5px 0,comma) //(5px,10px,5px,0)

8.map与相关函数

 $colors:(
  light:#fff,
  dark:#000
 )
  
 map-get($colors,dark)  // #000 //获取指定的值
 map-keys($colors) // (light,dark) //获取所有的key
 map-values($colors) // (#fff,#000) //获取所有的值
 map-has-key($colors,light) //true  是否有当前的key
 map-merge($colors,(light-gray: #e5e5e5))  //添加
 map-remove($colors,light,dark)  // (light-gray: #e5e5e5)     删除
            

9.插值

#{}, 一个#和一个花括号里包含变量就是插值。

 /*scss*/
 $name: "info";
 $attr: "border";
 .content-#{$name} {
   #{$attr}-color: #ccc;
 } 
 
 /*css*/
  .content-info {
     border-color: #ccc;
  }   

10. 条件控制

  /*scss*/
  $flag= true;
  $theme: "light";
  .body {
   @if  $theme == dark {
     backgroud-color: black;
   } @else if $theme == light {
     backgroud-color: white;
   } @else {
     backgroud-color: grey; 
   }
 }

  .content {
    @if  $flag {
      color: red; 
     }  @else {
      color: yellow;   
     }
   }
   
 /*css*/
  .body {
    backgroud-color: white;  
  }
  
  .content {
    color: red;  
  }
  

tips: 并且:and/&& ,或:or、去反:not、返回: @return

10. @for

• @for $var form <开始值> through <结束值>
• @for $var form <开始值> to <结束值>

/*scss*/
$columns: 3;
@for $i from 1 through $columns {
 .col-#{$i} {
   width: 100% / $columns * $i  
   }     
}

@for $i from 1 to $columns {
 .row-#{$i} {
   width: 100% / $columns * $i  
   }     
}

/*css*/
.col-1 {
     width: 25%
}

.col-2 {
     width: 50%
}

.col-3 {
     width: 75%
}


.row-1 {
     width: 25%
}

.row-2 {
     width: 50%
}

tips: through循环的次数，包含结束值 , to循环次数 不包含结束值

11. @each

循环列表

 /*scss*/
 $icons：success error warning;
 @each $icon in $icons {
  .icon-#{$icon} {
     background-image: url(../images/icons/#{$icon}.png) 
  }
 }

 /*css*/
 
 .icon-success {
    background-image: url(../images/icons/success.png)   
 } 
 
 .icon-error {
    background-image: url(../images/icons/error.png)   
 }
 
 .icon-warning {
    background-image: url(../images/icons/warning.png)   
 } 

12. @while

/*scss*/
 $i: 6;
 @while $i > 0 {
   .item-#{$i} {
       width: 5px * $i; 
    }
   $i: $i-2;    
 }
 
/*css*/
.item-6 {
     width: 30px;
 }
 
.item-4 {
     width: 20px;
 }
 
.item-2 {
    width: 10px;
 }

13. 用户自定义函数

 /*scss*/
 $colors:(light: #fff,dark: #000)
 @function color($key){
  //警告
  @if not map-has-key($colors,$key)   {
   @warn  "在$colors里没找到 #{$key}这个key"
   } 
   @return map-get($colors,$key);
 }
 
 .body {
   background-color: color(light);
 }
 
 /*css*/
 .body {
   background-color:  #fff; 
 }
 

tips: 异常信息可以设置警告@warn和错误@error

BEM规范建议

规范

.block { /* 块*/ } 
.block__element { /* 元素 */ } 
.block--modifier { /* 修饰符 */ }

实际应用

 
<!--块 -->
<div class="content"> 

 <!-- content__button 元素 -->
  <button   
    class="content__button
    
    content__button--red ">
  </button>
    <!-- content__button--red 修饰 -->
</div>



 

 /*scss*/

//块
.content {
    
  //元素    
  &__button {
      width: 40px;
      height:  40px;
      padding: 5px;
  }

  //修饰
   &__button--red {
     color: red 
   }
}

/*css*/

content__button {
     width: 40px;
     height:  40px;
     padding: 5px;
 }
 
 content__button--red {
     color: red 
 }
 

推荐

如果还想知道前端其他的方面的知识，可以看过来

• vue知识点归纳与总结(笔记)
• es5、es6、es7知识点的归纳与总结(笔记)