当前位置：首页 > article >正文

css预编译器-Sass常用命令详解

article 2024/10/24 12:50:31

一、简介

作为CSS 预编译器之一，它允许开发者使用更高级的语法和功能来编写 CSS，并在编译过程中将其转换为标准的 CSS 代码。

介绍之前我们先想想几个问题：

为什么要使用sass？
sass有什么好处？
是否需要学习它？

二、安装

2.1 全局安装

本地练习的时候可以安装到全局，方便学习和生成。

npm install -g sass

在命令行中使用 Sass 编译器将 .scss 文件编译为 .css 文件

sass index.scss index.css 
// 取消生成源码视图，同时实时更新编译
sass index.scss index.css  --no-source-map --watch

2.2 项目安装

如果你的项目使用 Webpack，确保安装了相应的 loader。执行以下命令安装 sass-loader 和 node-sass：
```
 npm install sass-loader node-sass --save-dev
```

在 Webpack 配置文件（通常是 webpack.config.js）中进行如下配置：

   module.exports = {
     //...其他配置
     module: {
       rules: [
         {
           test: /\.scss$/,
           use: [
             'style-loader',
             'css-loader',
             'sass-loader'
           ]
         }
       ]
     }
   };

三、主要特点

3.1 声明变量

可以定义变量来存储颜色、字体大小、间距等常用的值，然后在整个样式表中重复使用

$color: #fff;
$fontSize: 16px;

body {
  background-color: $color;
  font-size: $fontSize;
}

3.2 函数定义

Sass 提供了一些内置函数，如颜色操作函数、数学函数等，也可以自定义函数来实现特定的功能。

@function double($number) {
  @return $number * 2;
}

body {
  width: double(100px);
}

3.3 循环

在 Sass 中，可以使用@for、@while和@each指令来实现循环。

3.3.1 @for循环

@for $var from <start> through <end>：包括end值。
@for $var from <start> to <end>：不包括end值。

// 循环三次
@for $i from 1 through 3 {
  .item-#{$i} {
    width: $i * 100px;
  }
}
// 循环两次
@for $i from 1 to 3 {
  .item-#{$i} {
    width: $i * 100px;
  }
}

3.3.2 @while循环

只要条件$i <= 3为真，循环就会继续。每次循环都会生成一个带有不同宽度的.element-<n>类

$i: 1;
@while $i <= 3 {
 .element-#{$i} {
    width: $i * 100px;
  }
  $i: $i + 1;
}

3.3.3 @each

// 遍历列表
$colors: red,
green,
blue;

@each $color in $colors {
  .color-#{$color} {
    background-color: $color;
  }
}
// 遍历对象
$map: (key1: value1, key2: value2, key3: value3);
@each $key,
$value in $map {
  .#{$key}-style {
    property: $value;
  }
}

3.4 样式混入（Mixins）

可以定义可重用的代码块，称为混合，可以在样式表中多次调用。混合可以包含属性、选择器甚至其他混合。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

body {
  width: double(100px);
  @include border-radius(10px);
}

3.5 样式嵌套

允许将 CSS 规则嵌套在其他规则中，反映 HTML 的结构，使代码更具可读性和逻辑性。

ul {
  color: $color;
  li {
    height: $height;
  }
}

3.6 样式继承

可以通过继承现有规则来创建新的规则，避免重复代码

.common {
  color: $color;
  height: $height;
}
body {
  width: double(100px);
  @extend.common;
}

四、sass常用内置函数

4.1 颜色相关函数

lighten($color, $amount)：使颜色变亮。
- $color是要调整的颜色，$amount是亮度调整的百分比。
- 例如：lighten(#007bff, 20%)会使蓝色 #007bff 变亮 20%。
darken($color, $amount)：使颜色变暗。
- 与 lighten 函数类似，但是使颜色变暗。
- 例如：darken(#f5f5f5, 10%)会使浅灰色 #f5f5f5 变暗 10%。
rgba($color, $alpha)：创建一个带有透明度的颜色。
- $color是基础颜色，$alpha是透明度值，范围从 0 到 1。
- 例如：rgba(#007bff, 0.5)会创建一个半透明的蓝色。
mix($color1, $color2, $weight)：混合两种颜色。
- $color1和 $color2是要混合的颜色，$weight是第一个颜色的权重。
- 例如：mix(#ff0000, #00ff00, 50%)会混合红色和绿色，得到一个中间色。

4.2 数值相关函数

percentage($number)：将一个数字转换为百分比字符串。
- 例如：percentage(0.5)会返回 50%。
round($number)：将一个数字四舍五入到最接近的整数。
- 例如：round(3.6)会返回 4。
ceil($number)：向上取整。
- 例如：ceil(3.1)会返回 4。
floor($number)：向下取整。
- 例如：floor(3.9)会返回 3。

4.3 字符串相关函数

quote($string)：为字符串添加引号。
- 例如：quote(Hello World)会返回 "Hello World"。
unquote($string)：去除字符串的引号。
- 如果字符串有引号，会去除引号并返回字符串内容。
str-length($string)：返回字符串的长度。
- 例如：str-length('Hello')会返回 5。

4.4 列表相关函数

nth($list, $n)：获取列表中的第 n 个元素。
- $list是一个列表，$n是索引值（从 1 开始）。
- 例如：nth((1, 2, 3), 2)会返回 2。
join($list1, $list2, $separator)：将两个列表连接在一起，并可以指定分隔符。
- $list1和 $list2是要连接的列表，$separator是分隔符（可选）。
- 例如：join((1, 2), (3, 4), ', ')会返回 1, 2, 3, 4。
append($list, $value, $separator: auto)：向列表末尾添加一个值。
- $list是原列表，$value是要添加的值，$separator是分隔符（可选）。
- 例如：append((1, 2), 3)会返回 1, 2, 3。

4.5 其他函数

unit($number, $unit)：为数字添加单位。
- $number是数字，$unit是单位字符串。
- 例如：unit(10, px)会返回 10px。
if($condition, $true-value, $false-value)：根据条件返回不同的值。
- $condition是一个布尔值表达式，$true-value是条件为真时返回的值，$false-value是条件为假时返回的值。
- 例如：if(1 > 2, red, blue)会返回 blue。

五、总结

最后我们总结一下为什么要使用sass、它解决了什么样的问题。

sass是在css的基础上做了语法增强，传统的css语法来实现如今复杂的前端界面需要编写大量的css语法，同时不易维护。

5.1 sass的优势

提高开发效率：通过变量、混合和函数等功能，减少了重复代码的编写，提高了开发效率。嵌套规则使 CSS 代码更具结构性，更容易理解和维护。
更好的可维护性：变量的使用使得在需要修改样式时，只需要修改一个地方即可影响整个项目。混合和函数可以将复杂的样式逻辑封装起来，提高代码的可重用性和可维护性。
与团队协作更方便：Sass 的语法和功能使得团队成员可以更轻松地理解和修改彼此的代码。可以使用变量和混合来定义统一的设计规范，提高团队协作的效率。
强大的功能扩展：Sass 不仅提供了丰富的内置函数，还可以通过插件扩展其功能。例如，可以使用插件来实现自动添加浏览器前缀、生成 CSS 网格系统等功能。