解锁Sass：提升CSS编码效率的神器

天生我材必有用_吴用
226 阅读6分钟

Sass详解

目录

  • 目录
  • Sass是什么
  • 为什么使用Sass
  • 安装Sass,vue安装sass
  • Sass语法：变量，嵌套，混合，继承，运算，导入，函数，控制指令，循环指令，插值
  • 总结

Sass 是什么

      Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了CSS语言，使得 CSS 编写更加高效和强大。Sass 提供了变量、嵌套、混合（mixin）、继承等功能，使 CSS 的维护和复用变得更简单。

为什么使用Sass，和CSS有哪些区别

         Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，扩展了CSS的功能，使编写样式更高效和维护更方便。使用Sass有许多优势，主要体现在以下几个方面：

  1. 变量：在Sass中，可以定义变量来存储CSS属性值，比如颜色、字体大小等。这使得样式更加灵活和易于维护，只需在一个地方更新变量的值，就可以全局应用变化。
  2. 嵌套规则：Sass允许嵌套CSS规则，这样可以更直观地组织和关联样式，避免冗长的选择器。
  3. 部分文件和导入：可以将样式拆分成多个文件，然后通过@import导入，增强了代码的模块化和可维护性。
  4. 混合宏（Mixins）：混合宏允许你定义可重用的样式块，并在需要的地方引入这些样式。比如可以用混合宏来处理跨浏览器的CSS前缀。
  5. 继承：使用@extend可以让一个选择器继承另一个选择器的样式，减少冗余。
  6. 运算：Sass支持在样式中进行数学运算，可以对长度、颜色、字体大小等进行计算

安装 Sass

      要使用 Sass，你首先需要安装它。可以通过 npm（Node Package Manager）进行安装：

	npm install -g sass

安装完成后，可以使用 sass 命令来编译 Sass 文件。

vue中安装Sass

步骤一、安装必要的依赖包

这将会安装sass和 sass-loader，-D 表示将它们作为开发依赖（devDependencies）安装

npm install -D sass sass-loader

步骤二、配置 Vue 项目以支持 Sass

如果你使用的是 Vue CLI 创建的项目，默认情况下已经配置好了对Sass的支持。你只需要安装上面的依赖包，然后就可以直接在组件中使用Sass了。如果你需要自定义一些配置，可以在项目根目录下创建或修改 vue.config.js 文件：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 这里可以进行全局变量、mixin 等的注入
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
};

步骤三、在 Vue 组件中使用 Sass

在 Vue 组件中使用 Sass，你可以在<style>标签中指定lang="scss"或 lang="sass"。 例如：

<template>
  <div class="example">
    <p class="text">Hello Sass!</p>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent'
}
</script>

<style lang="scss">
.example {
  padding: 20px;
  background-color: #f9f9f9;

  .text {
    color: #333;
    font-size: 16px;
    @include some-mixin; // 如果有全局 mixin
  }
}
</style>

在这个示例中， 表明我们在使用 Sass（具体来说是 SCSS 语法）

完整的示例项目

假设我们有一个基于 Vue CLI 创建的项目，项目结构如下：

my-vue-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── styles/
│   │   └── variables.scss
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

在 src/styles/variables.scss 文件中定义一些 Sass 变量：

// src/styles/variables.scss
$primary-color: #42b983;
$secondary-color: #35495e;

在 vue.config.js 文件中配置全局引入：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
};

然后在你的组件中使用这些变量：

<template>
  <div class="example">
    <p class="text">Hello Sass with Variables!</p>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent'
}
</script>

<style lang="scss">
.example {
  padding: 20px;
  background-color: $primary-color;

  .text {
    color: $secondary-color;
    font-size: 16px;
  }
}
</style>

通过上述步骤，你就可以在 Vue 项目中成功安装并使用 Sass 了。

Sass 语法

Sass 有两种语法：.sass 和.scss。.sass 语法更简洁，但使用时需要注意缩进；.scss 语法更接近于 CSS，是更常用的一种。

变量

      Sass 中可以使用变量来存储值，方便复用。

	$primary-color: #333;
	
	body {
	  color: $primary-color;
	}

嵌套

      Sass 允许在选择器中嵌套规则，使得层级关系更加清晰。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li { display: inline-block; }

    a {
      text-decoration: none;
      color: $primary-color;

      &:hover {
        color: darken($primary-color, 10%);
      }
    }
  }
}

混合（Mixin）

      混合器（Mixin）允许你定义可复用的样式块，可以带参数使用。

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

.box { @include border-radius(10px); }

代码解释：

  1. @mixin border-radius($radius) 定义了一个名为 border-radius 的混合宏，接受一个参数 $radius。 混合宏内部包含三条 CSS 规则： 2. -webkit-border-radius: $radius;：为 WebKit 内核的浏览器（如 Chrome、Safari）设置圆角边框。

  2. -moz-border-radius: $radius;：为 Mozilla 内核的浏览器（如早期版本的 Firefox）设置圆角边框。

  3. border-radius: $radius;：为标准的 CSS 属性设置圆角边框。

  4. 这些规则用于确保在不同浏览器中都能正确显示圆角效果。

  5. @include 指令：在需要的地方应用混合宏。@include border-radius(10px); 使用 border-radius 混合宏，并传入参数 10px。 这会将混合宏中的所有样式规则应用到 .box 类。

  6. 生成的 CSS经过 Sass 编译后，这段代码生成的 CSS 如下：

    .box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

  7. 作用

    • 样式复用：通过 %message-shared 占位符，定义一组可以在多个类中复用的样式，避免重复书写相同的样式规则。
    • 继承和扩展：通过 @extend 指令，.message、.success 和 .error 类都继承了 %message-sharedx` 的样式，同时可以根据需要在继承的基础上添加或覆盖特定样式。
    • 简化和优化：减少了 CSS 代码的冗余，简化了样式的维护和更新。当需要修改共享样式时，只需修改 %message-shared 占位符中的样式，所有继承该样式的类都会自动更新。

  8. 总结：这种方式使得样式的复用和维护更加方便、高效，特别适用于需要在多个地方应用相同基础样式但又需要局部定制的场景。

    %message-shared 定义了一组共享的样式。 .message、.success和 .error 类通过 @extend 指令继承了这些共享样式。 .success 和 .error 类在继承的基础上，进一步覆盖了特定的边框颜色。

继承

      继承使得一个选择器可以继承另一个选择器的样式。

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

代码解释：

  1. 定义 %placeholder（占位符选择器）：

    %message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

    %message-shared是一个占位符选择器，用来定义一组共享的样式。该占位符包含三条 CSS 规则：边框、内边距和文本颜色。

  2. .message 类：

    .message {
  @extend %message-shared;
}

    .message类使用 @extend 指令，继承 %message-shared 占位符中的样式。这意味着 .message 类将具有%message-shared中定义的边框、内边距和文本颜色样式。

  3. .success 类：

    .success {
  @extend %message-shared;
  border-color: green;
}

    .success 类同样使用@extend指令，继承%message-shared的样式。另外，border-color: green; 将边框颜色覆盖为绿色。

  4. .error 类：

    .error {
  @extend %message-shared;
  border-color: red;
}

.error 类使用 @extend 指令，继承 %message-shared 的样式。另外，border-color: red; 将边框颜色覆盖为红色。

  1. 生成的 CSS，经过 Sass 编译后，这段代码生成的 CSS 如下： 
    .message, .success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

运算

       Sass 支持基本的数学运算，如加、减、乘、除。

.container {
  width: 100%;
}

aside {
  width: 250px;
  float: left;
}

main {
  width: calc(100% - 250px);
  float: left;
}

导入

       Sass 文件可以互相导入，以模块化的方式组织代码。

// _reset.scss
* {
  margin: 0;
  padding: 0;
}

// main.scss
@import 'reset';

body {
  font-family: Arial, sans-serif;
}

函数

      Sass 提供了多种内置函数，也允许定义自己的函数。定义一个函数。函数可以接受参数，并返回一个值。这个值可以在样式表的其他地方使用，就像普通的 CSS 属性值一样。

用途背景

       REM（Root Em）单位：REM 是一种相对于根元素（通常是 <html> 或 <body>）字体大小的单位。使用 REM 可以更好地控制响应式设计中的字体大小和其他尺寸。        REM（Root Em）可维护性：通过函数来计算 REM 值，可以方便地在整个项目中保持一致的比例。当需要改变根元素的字体大小时，只需修改一个地方，所有使用该函数的地方都会自动更新。

@function calculate-rem($px-value) {
  @return $px-value / 16px * 1rem;
}
// 应用到css
body {
  font-size: calculate-rem(16px);
}

函数解释

函数声明：@function calculate-rem($px-value)

  • 定义了一个名为 calculate-rem 的函数。
  • 这个函数接受一个参数 $px-value，表示以像素（px）为单位的值。

返回值：@return $px-value / 16px * 1rem;

  • @return 用来指定函数的返回值。
  • 这个返回值是通过将输入的像素值 $px-value 除以 16px，然后乘以 1rem 得到的。

具体计算

在 @return $px-value / 16px * 1rem; 中：

  1. $px-value / 16px：假设 $px-value 为 16px，则计算 16px / 16px 结果为 1（无单位的数值，因为像素单位相互抵消）。
  2. 乘以 1rem：计算结果 1 再乘以 1rem，得到 1rem。

Sass 编译

      将 Sass 文件编译成 CSS 文件，可以使用以下命令：

sass input.scss output.css

      也可以监听文件变化自动编译：

sass --watch input.scss:output.css

高级功能

控制指令

      Sass 提供了多种控制指令，使样式具有更高的灵活性。

条件指令

$theme: dark;

body {
  @if $theme == light {
    background-color: white;
    color: black;
  } @else {
    background-color: black;
    color: white;
  }
}

循环指令

@for 指令：用于循环生成样式规则。

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

代码解释：

  1. $i from 1 through 3：表示循环变量 $i 从 1 到 3（包括 3），所以循环会执行三次。
  2. .item-#{$i}：Sass 插值语法，将$i的值插入到类名中，生成 .item-1，.item-2，和 .item-3 三个类。
  3. width: 2em * $i：设置 width 属性值为2em乘以$i的结果。
  4. 生成的 CSS 
    	 .item-1 {
	  width: 2em;
	}
	
	.item-2 {
	  width: 4em;
	}
	
	.item-3 {
	  width: 6em;
	}

@each 指令（单个变量）用于遍历一个列表，并生成对应的样式规则。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

代码解释：

  1. $animal in puma, sea-slug, egret, salamander：表示遍历 puma，sea-slug，egret，和 salamander 四个值，每个值会赋给变量 $animal。
  2. .#{$animal}-icon：Sass 插值语法，将 $animal 的值插入到类名中，生成 .puma-icon，.sea-slug-icon，.egret-icon，和 .salamander-icon 四个类。
  3. background-image: url('/images/#{$animal}.png')：设置 background-image 属性值为/images/目录下对应的图片文件。
  4. 生成的 CSS 
    .puma-icon {
  background-image: url('/images/puma.png');
}

.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}

.egret-icon {
  background-image: url('/images/egret.png');
}

.salamander-icon {
  background-image: url('/images/salamander.png');
}

@each 指令（多个变量）用于遍历一个包含多个变量的列表，并生成对应的样式规则。

@each $header, $color in (header1, blue), (header2, green), (header3, red) {
  .#{$header} {
    color: $color;
  }
}

代码解释：

  1. $header, $color in (header1, blue), (header2, green), (header3, red)：表示遍历三组变量，每组包括 $header 和 $color。列表中的每一对变量依次赋值给 $header 和 $color。
  2. .#{$header}：Sass 插值语法，将 $header 的值插入到类名中，生成 .header1，.header2，和 .header3 三个类。
  3. color: $color：设置 color 属性值为$color的值。
  4. 生成的 CSS 
    .header1 {
  color: blue;
}

.header2 {
  color: green;
}

.header3 {
  color: red;
}

总结:显著减少重复代码，使样式表更加简洁和易于维护。

  • @for 指令：用于生成一系列基于循环计数器的样式规则，适合需要依次递增或递减的样式。
  • @each 指令（单个变量）：用于遍历列表中的每个值，并生成相应的样式规则，适合处理一组相似但值不同的样式。
  • @each 指令（多个变量）：用于遍历包含多个变量的列表，并生成相应的样式规则，适合处理相关联的多项值。

插值

      插值允许在选择器或属性名称中使用变量。

$side: left;

.#{$side}-bar {
  border-#{$side}: 1px solid #ccc;
}

代码解释：

  1. 变量定义：$side: left;
    • 定义了一个变量 $side，值为 left。
    • 这个变量将在后续代码中用来动态生成类名和属性名。
  2. 插值语法：.#{$side}-bar
    • 插值语法 #{$side} 将变量 $side 的值插入到类名中。
    • 由于 $side 的值为 left，所以 .#{left}-bar 将生成 .left-bar 类名。
  3. 动态属性名：border-#{$side}
  • 同样使用插值语法 #{$side} 将变量 $side 的值插入到属性名中。
  • border-#{left} 将生成 border-left 属性名。
  • 属性值为 1px solid #ccc，表示边框宽度为 1px，样式为实线，颜色为 #ccc（灰色）。
  1. 生成的 CSS 
    	.left-bar {
	  border-left: 1px solid #ccc;
	}

总结

        这段代码的作用是：定义一个变量 $side，值为 left。使用插值语法将变量值插入到类名和属性名中，动态生成样式。最终生成 .left-bar 类，并为其设置border-left: 1px solid #ccc的样式。         这种动态生成样式的方式，使得样式表更加灵活和易于维护。例如，如果需要将 left 改为 right，只需修改变量值即可：

$side: right;

.#{$side}-bar {
  border-#{$side}: 1px solid #ccc;
}

生成的 CSS 将变为：

.right-bar {
  border-right: 1px solid #ccc;
}

这样可以有效减少重复代码，提高样式表的可维护性。

示例

// variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;

// mixins.scss
@mixin box-shadow($x, $y, $blur, $color) {
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

// base.scss
body {
  font-family: $font-stack;
  color: $primary-color;
}

a {
  color: $secondary-color;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}

// components/_button.scss
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: $primary-color;
  color: white;
  border-radius: 3px;
  @include box-shadow(0px, 2px, 5px, rgba(0, 0, 0, 0.2));
  
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

// main.scss
@import 'variables';
@import 'mixins';
@import 'base';
@import 'components/button';

总结

        Sass 是一个功能强大的 CSS 预处理器，可以显著提高样式代码的复用性和可维护性。通过使用变量、嵌套、混合、继承等特性，开发者可以更加高效地编写和管理 CSS 代码。希望这篇详细的介绍能够帮助你更好地理解和使用 Sass。

avatar
文章
阅读
粉丝