CSS预处理与SASS语法

最新推荐文章于 2025-10-04 17:01:09 发布

原创最新推荐文章于 2025-10-04 17:01:09 发布 · 570 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #css #SASS

CSS 同时被 2 个专栏收录

12 篇文章

订阅专栏

React

6 篇文章

订阅专栏

本文深入讲解SASS预处理语言的语法特点，包括变量、嵌套、计算功能等基础语法，并介绍如何利用继承、mixin实现代码重用，还探讨了条件语句、循环语句及自定义函数等高级用法。

CSS预处理和SASS语法

CSS预处理和SASS语法

为什么用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用法指南