CSS预处理与SASS语法

CSS预处理和SASS语法

• CSS预处理和SASS语法
  
  • 为什么用SASS？
  • SASS语法
    
    • 1.变量
    • 2.嵌套
    • 3.计算功能
    • 4.代码重用
      
      • 继承
      • mixin
    • 5.高级用法
      
      • 条件语句
      • 循环语句
      • 自定义函数
  • CSS预处理

为什么用SASS？

刚接触公司的项目，我真的很费解，为什么项目里要用类似SASS,LESS这样的东西，不是有css吗，导入css文件不就可以了吗？这个是用来干嘛的啊？要知道为什么，先来看看SASS到底是什么，怎么用的。

SASS语法

我们先来看一个SASS文件的例子：

$class-prefix: "tabs";ul {  margin: 0;  padding: 0;}.#{$class-prefix} {  &-bar {    margin-bottom: 16px;  }  &-nav {    font-size: 14px;    &:after,    &:before {      display: table;      content: " ";    }    &:after {      clear: both;    }  }}

WTF?这都是什么?

1.变量

先看第一行：

    $class-prefix: "tabs";    ...    .#{$class-prefix} {}

SASS中可以使用变量，但是我们要告诉程序这是变量，所以用$开头，所以这里class-prefix是变量，它的值是”tabs”，怎么使用？如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

2.嵌套

继续往下看：

.#{$class-prefix} {  &-bar {    margin-bottom: 16px;  }  &-nav {    font-size: 14px;    &:after,    &:before {      display: table;      content: " ";    }    &:after {      clear: both;    }  }}

&是什么？首先我们得看到这个结构，他是嵌套的，通过一层层的缩进，表示父元素下的子元素，而&就是引用父元素,属性也可以嵌套，比如border-color属性，可以写成(注意，border后面必须加上冒号)：

p {    border: {    color: red;     }}

上面的这几个语法是几乎所有的SASS文件都会遇到，而下面可能不是一定会用到，却也是代表SASS语法的特性，所以也要普及一下。
下面的这些用法都是摘自阮一峰的博客

3.计算功能

我们可以在SASS中使用计算功能：

body {　　　margin: (14px/2);　　　top: 50px + 100px;　　　right: $var * 10%;}

4.代码重用

继承

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

.class1 {　　border: 1px solid #ddd;}

class2要继承class1，就要使用@extend命令：

.class2 {　　@extend .class1;　　font-size:120%;}

mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。

　　@mixin left {　　　　float: left;　　　　margin-left: 10px;　　}

使用@include命令，调用这个mixin。

　　div {　　　　@include left;　　}

mixin的强大之处，在于可以指定参数和缺省值。

　　@mixin left($value: 10px) {　　　　float: left;　　　　margin-right: $value;　　}

使用的时候，根据需要加入参数：

　　div {　　　　@include left(20px);　　}

下面是一个mixin的实例，用来生成浏览器前缀。

　　@mixin rounded($vert, $horz, $radius: 10px) {　　　　border-#{$vert}-#{$horz}-radius: $radius;　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;　　}

使用的时候，可以像下面这样调用：

　　#navbar li { @include rounded(top, left); }　　#footer { @include rounded(top, left, 5px); }

5.高级用法

条件语句

@if可以用来判断：

　　p {　　　　@if 1 + 1 == 2 { border: 1px solid; }　　　　@if 5 < 3 { border: 2px dotted; }　　}

配套的还有@else命令

　　@if lightness($color) > 30% {　　　　background-color: #000;　　} @else {　　　　background-color: #fff;　　}

循环语句

SASS支持for循环：

　　@for $i from 1 to 10 {　　　　.border-#{$i} {　　　　　　border: #{$i}px solid blue;　　　　}　　}

也支持while循环：

　　$i: 6;　　@while $i > 0 {　　　　.item-#{$i} { width: 2em * $i; }　　　　$i: $i - 2;　　}

each命令，作用与for类似：

　　@each $member in a, b, c, d {　　　　.#{$member} {　　　　　　background-image: url("/image/#{$member}.jpg");　　　　}　　}

自定义函数

SASS允许用户编写自己的函数。

　　@function double($n) {　　　　@return $n * 2;　　}　　#sidebar {　　　　width: double(5px);　　}

CSS预处理

所以,SASS究竟做到了什么？单从上面的语法来看，SASS不再是像css那样是“不可控制”的装饰语句：
变量，函数，mixin，继承这些都可以让我们少写很多代码，嵌套使机构更加的清晰，计算，高级语法是我们能更方便地控制样式。当然最终目的还是将SASS编译生成css。网上有这样一段话我觉得说的很通俗：
CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：
- 语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
- 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭
一个React项目除了CSS预处理，也会使用CSS Module，刚开始听到这两个词，我根本分不清，所以除了弄懂CSS预处理，CSS Modules也要清楚，这个在其他文章中学习。

本文部分内容摘自阮一峰博客
SASS用法指南