CSS的华丽转身：SASS/SCSS浅述及入门 - 简书

安宇雨 - 随手采集
2022-01-15 12:42:13
随手采集
0000-未整理-等待研究

环境说明：本文仅针对SASS在Weex开发环境的使用

由来

总所周知，CSS不是一种编程语言，它可以开发网页的样式，但是由于没有变量、条件语句等程序员眼中的“编程元素”，所以写CSS是一件非常“不爽”的事情。
举个栗子：

.one {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  color: #1e1e1e;
}
.two {
  padding-top: 20px;
  color: #1e1e1e;
}

看到此情此景，身为程序员的你，是不是很想把color: #1e1e1e;这行代码抽出来？比如说定义一个redColor变量的值为#1e1e1e

目前业界已经有"好事者"为CSS加入一个名为"CSS预处理器"（css preprocessor）的东西，目的是为了添加编程元素。

"CSS预处理器"的基本思想：用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件

SASS正是这个思想驱动下的产物，也是目前较为流行，优点较多的编程语言。而SCSS称为SASS的升级版，主要的区别在于编写的文件后缀和格式有所不同：

SCSS支持的是.scss的文件后缀，而SASS为.sass
具体语法上，SASS对代码的排版有着非常严格的要求，而且没有大括号，没有分号，还有行首空格问题，比如第一个元素的属性空2个空格就不能通过编译，阅读性，灵活性都不高，SCSS则针对SASS这几点缺点进行了优化和扩展

在Weex工程中，可以比较合适地支持SCSS，只需要规避CSS在Weex中的使用规则即可。

安装配置步骤及使用方法

在标准的weex工程里面，需要先安装几个依赖：

npm install node-sass;
npm install sass-loader; //依赖node-sass

配置loader，打开webpack.config.js，修改loader，此处loader用于解析.scss文件：

loaders: [
        {
          test: /\.scss$/,
          loader: "css!sass", //这样写样式和脚本会混在一个文件，也就是不分离样式，webpack有插件可以实现分离样式
          exclude: /node_modules/
        }
      ]

用 import 或 require 引入的sass文件进行加载，以及声明的内部样式进行加载，两种方式可以同时使用
```
<style lang="sass">
  //方式一：import
  @import "./foo.scss";
  //方式二：直接写sass语法样式
</style>
```
踩过的坑：目前无法在<script>里面通过require的方式来加载scss文件，不建议如下用法：
```
<script>
  require("./foo.scss")
</script>
```

基本语法

变量

书写格式：$开头

$red : #1875e7;　

.component {
  color : $red;
}

选择器嵌套

div h1 {
  color : red;
}
div {
  hi {
    color:red;
  }
}

属性嵌套

.one {
  border: {   //border后面必须加上冒号
    color: red;
  }
}
// 在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
.two {
  &:hover { color: #dcdcdc; }
}

计算功能

.tabbar {
  margin: (88px/4);
  top: 50px - 100px;
  height: $var * 17%;
}

注释
- 标准的CSS注释：/ comment / 注意一下，这种注释会保留到编译后的CSS文件
- 单行注释：// comment 只保留在SASS源文件中，编译后被省略，即编译后的CSS不再保留这些注释
- 重要注释：/! 内容 / 即使是压缩模式编译，也会保留这行注释（标准的CSS注释压缩之后会被省略），通常用于声明版权信息

颜色函数

// SASS提供了一些内置的颜色函数，以便生成系列颜色
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

插入文件

// @import命令，用来插入外部文件
@import "path/filename.scss";
// 如果插入的是.css文件，则等同于css的import命令
@import "foo.css";

代码的重用

继承

.class1 {   // 定义一个class1
  border: 2px solid #1e1e1e;
}
.class2 {  // 使用@extend命令，让class2继承class1
  @extend .class1;
  font-size:80%;
}

Mixin

Mixin可以理解成是C语言的宏（macro），可以用来书写重用的代码块

// 使用@mixin命令，定义一个代码块，类似于给样式添加一个标签，标记这个样式可以复用
@mixin right {
  float: right;
  margin-right: 20px;
}
// 使用@include命令，调用这个mixin。
.one {
  @include right;
}
// mixin还可以指定参数和缺省值
@mixin right($value: 20px) {  // $value为right的参数，缺省值为20px
  float: right;
  margin-left: $value;
}
// 调用时根据需要加入实参
.two {
  @include left(40px);
}
// 有了mixin，我们可以抽象出不同属性中的相同内容，通过参数形式传递，比如以下场景：生成浏览器前缀
@mixin rounded($vert, $horz, $radius: 20px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
// 以上代码调用方式
.one { @include rounded(top, left); }
.two { @include rounded(top, left, 5px); }

高级用法

条件语句

// 可以使用@if用来判断
.one {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
}
// 还可以配套上@else
@if lightness($color) > 50% {
  background-color: #dcdcdc;
} 
@else {
  background-color: #ffffff;
}


*   循环语句

```scss
// 支持for循环
@for $i from 1 to 10 {
  .border-#{$i} {
  border: #{$i}px solid red;
  }
}
// 支持while循环
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 4em * $i; }
  $i: $i - 3;
}
// each命令，作用与for类似
@each $item in a, b, c, d {
  .#{$item} {
  background-image: url("/image/#{$item}.jpg");
  }
}

```

*   自定义函数

```scss
@function treble($n) {
  @return $n * 3;
}
#sidebar {
  width: treble(5px);
}

```

原网址: 访问
创建于: 2022-01-15 12:42:12
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到