CSS、SCSS、Sass和Less

豫章归来时
126 阅读5分钟

CSS、SCSS、Sass 和 Less 对比

对比列表

特性CSSSCSSSassLess
文件扩展名.css.scss.sass.less
变量无$variable$variable@variable
嵌套规则无支持支持支持
混合器无支持支持支持
继承无支持支持支持
样式和CSS语法的相似性-非常相似不同相似
编写和阅读复杂度较低中等中等中等
编译成CSS不需要编译需要编译需要编译需要编译

SCSS 和 Sass 是同一种CSS预处理语言的两种不同语法。它们的主要区别在于语法结构和风格：

SCSS

  • 全称：Sassy CSS
  • 语法风格：与CSS非常相似，使用大括号 {} 和分号 ;
  • 兼容性：完全兼容现有的CSS代码，可以逐步迁移现有的CSS文件
  • 示例： 
    $primary-color: #333;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;

  h1 {
    color: lighten($primary-color, 20%);
    font-size: 24px;
  }
}

Sass

  • 全称：Syntactically Awesome Stylesheets
  • 语法风格：采用缩进风格，不使用大括号和分号
  • 简洁性：相比SCSS语法更加简洁
  • 示例： 
    $primary-color: #333

body
  background-color: $primary-color
  font-family: Arial, sans-serif

  h1
    color: lighten($primary-color, 20%)
    font-size: 24px

总结

  • SCSS：语法与CSS相似，适合从CSS过渡到Sass的用户。
  • Sass：缩进语法更简洁，适合喜欢简洁风格的用户。

什么是混合器？

混合器（Mixins）是CSS预处理器中的一种机制，允许你定义可以在多个地方重用的样式规则集合。混合器可以接受参数，从而实现更加灵活和动态的样式生成。

为什么使用混合器？

  1. 重用性：你可以在多个地方使用相同的混合器，减少代码重复，提高代码的可维护性。
  2. 灵活性：混合器可以接受参数，根据不同的输入生成不同的输出，使得样式更具动态性和适应性。
  3. 可读性：混合器可以将复杂的样式逻辑封装在一起，使代码更加清晰和易于理解。
  4. 一致性：使用混合器可以确保样式在不同部分的一致性，避免样式的不一致和冗余。

示例代码

CSS

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  font-size: 24px;
}

p {
  color: #555;
  font-size: 16px;
}

.button-primary {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #333;
  color: white;
}

.button-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #555;
  color: #333;
}

SCSS

// 定义变量
$primary-color: #333;

// 混合器
@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
          box-shadow: $shadow;
}

// 基本样式
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;

  // 使用嵌套规则
  h1 {
    color: $primary-color;
    font-size: 24px;
    @include box-shadow(0px 0px 5px #888888); // 使用混合器
  }

  p {
    color: darken($primary-color, 20%);
    font-size: 16px;
  }
}

// 创建一个基础类用于继承
%base-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

// 继承基础类并扩展样式
.button-primary {
  @extend %base-button; // 使用占位选择器
  background-color: $primary-color;
  color: white;
}

.button-secondary {
  @extend %base-button; // 使用占位选择器
  background-color: lighten($primary-color, 20%);
  color: $primary-color;
}

Sass

// 定义变量
$primary-color: #333

// 混合器
=box-shadow($shadow)
  -webkit-box-shadow: $shadow
  -moz-box-shadow: $shadow
  box-shadow: $shadow

// 基本样式
body
  background-color: #f0f0f0
  font-family: Arial, sans-serif

  // 使用嵌套规则
  h1
    color: $primary-color
    font-size: 24px
    +box-shadow(0px 0px 5px #888888)

  p
    color: darken($primary-color, 20%)
    font-size: 16px

// 创建一个基础类用于继承
%base-button
  padding: 10px 20px
  border: none
  border-radius: 5px
  cursor: pointer

// 继承基础类并扩展样式
.button-primary
  @extend %base-button
  background-color: $primary-color
  color: white

.button-secondary
  @extend %base-button
  background-color: lighten($primary-color, 20%)
  color: $primary-color

Less

// 定义变量
@primary-color: #333;

// 混合器
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// 基本样式
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;

  // 使用嵌套规则
  h1 {
    color: @primary-color;
    font-size: 24px;
    .box-shadow(0px 0px 5px #888888); // 使用混合器
  }

  p {
    color: darken(@primary-color, 20%);
    font-size: 16px;
  }
}

// 创建一个基础类用于继承
.base-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

// 继承基础类并扩展样式
.button-primary {
  .base-button;
  background-color: @primary-color;
  color: white;
}

.button-secondary {
  .base-button;
  background-color: lighten(@primary-color, 20%);
  color: @primary-color;
}

在 Angular、React 和 Vue 中编译 SCSS、Sass 和 Less 为 CSS

Angular

使用 Angular CLI 创建项目并选择 SCSS

  1. 创建 Angular 项目并选择 SCSS：

    ng new my-angular-app --style=scss

  2. 进入项目目录：

    cd my-angular-app

  3. 启动开发服务器：

    ng serve

手动修改 angular.json 来设置 SCSS

  1. 安装 Sass：

    npm install sass

  2. 修改 angular.json 文件：

    {
  ...
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }
}

  3. 修改样式文件扩展名：

    @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

  4. 更新 angular.json 中的样式文件引用：

    "styles": [
  "src/styles.scss"
]

React

使用 Create React App 配置 SCSS

  1. 创建 React 项目：

    npx create-react-app my-react-app
cd my-react-app

  2. 安装 Sass：

    npm install sass

  3. 修改样式文件扩展名，并在组件中导入 SCSS 文件：

    import './App.scss';

配置 Less

  1. 安装 Less：

    npm install less less-loader react-app-rewired customize-cra

  2. 修改 package.json：

    "scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

  3. 创建 config-overrides.js：

    const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
    },
  })
);

Vue

使用 Vue CLI 创建项目并选择 SCSS

  1. 创建 Vue 项目：

    vue create my-vue-app

  2. 在选择样式预处理器时选择 SCSS。

  3. 进入项目目录：

    cd my-vue-app

  4. 启动开发服务器：

    npm run serve

在现有的 Vue 项目中添加 SCSS 支持

  1. 安装 Sass：

    npm install sass sass-loader --save-dev

  2. 修改 Vue 项目中的样式文件扩展名： 将 .css 文件改为 .scss，并在 Vue 组件中相应地修改样式文件扩展名：

    <style lang="scss">
// SCSS 样式
</style>

在现有的 Vue 项目中添加 Less 支持

  1. 安装 Less：

    npm install less less-loader --save-dev

  2. 修改样式文件扩展名： 将 .css 文件改为 .less，并在 Vue 组件中相应地修改样式文件扩展名：

    <style lang="less">
// Less 样式
</style>

如何编译 SCSS、Sass 和 Less 为 CSS

编译 SCSS/Sass

你可以使用 Node.js 的 sass 包来编译 SCSS 或 Sass 文件。

  1. 安装 Sass 编译器： 通过 npm 安装 sass：

    npm install -g sass

  2. 编译 SCSS 文件： 使用以下命令将 SCSS 文件编译成 CSS 文件：

    sass input.scss output.css

示例

假设你有一个 SCSS 文件 styles.scss：

$primary-color: #333;

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;

  h1 {
    color: $primary-color;
    font-size: 24px;
  }
}

运行以下命令进行编译：

sass styles.scss styles.css

生成的 styles.css 文件内容为：

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333;
  font-size: 24px;
}

编译 Less

你可以使用 Node.js 的 less 包来编译 Less 文件。

  1. 安装 Less 编译器： 通过 npm 安装 less：

    npm install -g less

  2. 编译 Less 文件： 使用以下命令将 Less 文件编译成 CSS 文件：

    lessc input.less output.css

示例

假设你有一个 Less 文件 styles.less：

@primary-color: #333;

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;

  h1 {
    color: @primary-color;
    font-size: 24px;
  }
}

运行以下命令进行编译：

lessc styles.less styles.css

生成的 styles.css 文件内容为：

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333;
  font-size: 24px;
}
avatar
文章
阅读
粉丝