CSS 预编译处理语言 Scss 和 Less 的语法及使用

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文来学习一下 CSS 预编译处理语言 SCSS 和 Less 的语法及使用. SCSS 和Less 使我们书写 CSS 样式是更加方便, 比如嵌套样式 使用 &即可表示父级类名 等等.

Sass 语法  && Less

sass   动态的 CSS 预编译处理 CSS

写一些语法规范     变量   嵌套   类的重用....

sass

body
    background:red;
    font-size:12px;

scss

   body{
        ...
    }

考拉使用 ：  拖拽 css 目录 设置输出路径  scss 文件要输出的 css 文件 识别中文 ： @charset "utf-8";

sass 语法：

• 注释 ：  // 不能被 css 识别      /**/ 可以被 css 识别

• 变量定义  ：   $变量

• 嵌套 ：

传统 css: 如果嵌套过深, 书写会特别麻烦, 而 Scss 就是解决这个问题的

  .nav {
     ...
     }
   .nav  ul{
          ...
     }
    .nav ul li{
    ...
     }

嵌套方式：

     .nav{
          width:960px;
          height : 40px;
          ul{
               margin-left : 20px;
               li{
                    float: left;
               }
          }
     }

符合属性嵌套：

border:{
     color: red;
     style:solid;
     width:1px;
}

• &表示继承父级标签

a {
       &:hover {
    color: red;
  }
}

代码重用(函数)：   sass 如何实现代码重用 ，有几种方式  ~~~

width: 960px;
margin: 0 auto;

.public{  //无参数   使用  @extend  .public;
     width:960px;
}
@mixin  public{  //可以定义参数   使用 :  @include  导入     先定义 后调用  （混合定义）
     ....
}

@mixin public($height:200px){//定义一个默认值
    width: 960px;
    height: $height;
    margin: 0 auto;
}
#header{
    @include public(400px);给具体的参数值 默认值无效，如果不传递参数 就按照默认值执行
}

在文件中导入：  @import "xxx.scss"   将多个 scss 文件合并成一个 css 文件

if 语句 : $type : monster;$flag : false;

@if $type==monster {         display :inline ;     }

@if $flag {         p {color :red; }

} @else{          p {color :blue; }      }

for 语句：

@for $i from 1 through 3 {
  .item-#{$i } { width: 2em \* $i ; }    //   .item1   .item2  .item3
}

a1  a2  a3