sass详细知识点介绍（环境配置）

最新推荐文章于 2024-08-21 09:20:48 发布
最新推荐文章于 2024-08-21 09:20:48 发布
阅读量1k 收藏 1
点赞数
分类专栏： sass 前端开发知识点 文章标签： sass ruby 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45168167/article/details/121165498
版权

相关介绍

一、CSS预处理器出现的原因

  1. 无法嵌套书写导致代码繁重、冗杂、逻辑混乱。
  2. 没有变量和样式复用机制，属性值只能以字面量的形式重复输出。
# 总结：代码复用性低；不易于维护
# 注：现在，现在的CSS是可以定义变量的！！！

:root{
    --red: #f3e1e1;
}

二、出名的CSS预处理器介绍

1. SCSS/SASS

SASS (.scss)。于2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。

2. LESS

LESS (.less)。于2009年诞生，借鉴了SASS的长处，并兼容了CSS语法，使得开发者使用起来更为方便顺手，但是相比于SASS，其编程功能不够丰富，反而促使SASS进化成为了SCSS。

3. Stylus

Stylus (.styl)。于2010年诞生，出自Node.js社区，主要用来给Node项目进行CSS预处理支持，人气较前两者偏低。

三、SCSS和SASS之间的关系

image-20200706194107318

简而言之：

Sass有两套语法：

1.第一种或更新的语法被称为SCSS。它是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。下文描述的Sass功能增强了此语法。使用此语法的文件扩展名为.scss。

2.第二种或更旧的语法被称为SASS。提供了一种更为简洁的CSS编写方式。它使用缩进而不是方括号来表示选择器的嵌套，并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为.sass。

任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式

四、使用CSS预处理器的优劣

1.优点

CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。支持嵌套、变量和逻辑等。可以让CSS更加简洁、提高代码复用性、逻辑分明等等

2.缺点

css的文件体积和复杂度不可控；增加了调试难度和成本等。

五、选择SCSS的原因

  1. 官方介绍

    Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

  2. 特色功能

    • 完全兼容 CSS3
    • 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
    • 通过函数进行颜色值与属性值的运算
    • 提供控制指令 (control directives)等高级功能
    • 自定义输出格式

六.SASS必学实际开发不写css都是用scss

  1. 介绍:

    • 是一种css的预编译模式,也是一种高效的css编写模式,实现这种模式还有:less,stylus…可以使用编写js的方式,写css.支持如:变量,循环,函数,封装,继承等等概念

    • sass是ruby公司推出的,计入ruby环境,进行了开源,所以node也可以使用sass

    • 最初sass语法文件后缀是**.sass**,不支持花括号和分号,不好用.所以ruby在sass基础上推出了新文件**.scss**,全面支持css语法,

    • 目前没有任何浏览器支持sass/sccs,需要转成css后再使用

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uv1z4wzk-1636100187607)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009105232316.png)]

    ​

  2. sass的编译环境搭建:sass和gulp没关系

    • 使用node环境的gulp模块的gulp-sass插件:提供sass文件的编译

    • 需要

    • node环境

    • gulp环境

    • 安装gulp-sass插件,注意官网更新npm i gulp-sass -D和npm i sass -D都要下载

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-92M6xD4l-1636100187610)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009110311563.png)]

    • 执行gulp

nth($)解析多个

复杂变量:类似数组和对象

多维数组:遍历属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0gN8csGI-1636100187613)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009111723536.png)]

对象:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z9kZkKVs-1636100187614)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009111901397.png)]

嵌套:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yzbxi6h2-1636100187617)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009112206942.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OgHE11Iv-1636100187619)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009112255500.png)]

&代表this

属性嵌套:波浪线不报错,加空格取消

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IsezoLxl-1636100187620)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009112725357.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X74r2Vd7-1636100187621)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009112950062.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OSc0dg0j-1636100187622)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009113100574.png)]

html的默认font-size是16px,6.25rem是100px,计算格式100/16

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HVC3USgl-1636100187624)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009113633101.png)]

函数配合计算,

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cJ84L5Dn-1636100187626)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009113924290.png)]

继承

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Igjfr9w8-1636100187627)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009114054718.png)]

导入并合并:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AwYDAR5g-1636100187630)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009114317631.png)]

根据所有依赖下载所有插件必须留一个文件package.json和node_modules文件夹使用命令下载

git上传指定忽略文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rwW056Tj-1636100187631)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009115342957.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cJlCcUSx-1636100187632)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20211009115820346.png)]

转存中…(img-AwYDAR5g-1636100187630)]

根据所有依赖下载所有插件必须留一个文件package.json和node_modules文件夹使用命令下载

git上传指定忽略文件

[外链图片转存中…(img-rwW056Tj-1636100187631)]

[外链图片转存中…(img-cJlCcUSx-1636100187632)]

环境配置

less、scss(sass)和stylus代码并不能被浏览器直接解析，所以必须先将它们编译成css代码

现有框架已经提供了css预处理器选项，编译相关配置会自动帮我们生成！所以只有在"练习"情况下才有必要安装该环境

一、安装分类

1.不依赖编辑器

# 全局安装scss预处理器，使用终端命令实现编译

a. Node环境下的node-sass模块
b. Node环境下的dart-sass模块
c. Ruby环境下的sass模块
d. Dart环境下的sass模块

# 注：这里的推荐顺序针对的是"练习"场景，而开发环境下推荐使用的是dart-sass
# 本质：某个语言的第三方库或者命令行工具

2.依赖编辑器

a. IDE代表：Webstrom	前提是安装上述"1"中的命令行编译工具，配置自动命令，另安装一个代码提示插件scss
b. 编辑器代表：vscode   安装Easy Sass（编译）和Sass（代码提示）两个插件

二、安装步骤

1.不依赖编辑器

😀 Node环境
- node-sass
a.安装
1. 安装node  https://nodejs.org(官网) 或 https://npm.taobao.org/mirrors/node(镜像)
2. *安装cnpm(不推荐直接将源换为淘宝镜像!!) $npm i -g cnpm --registry=https://registry.npm.taobao.org
3. 安装node-sass $npm i -g node-sass  或  $cnpm i -g node-sass
4. 检查是否安装成功$node-sass -v

image-20200706124420782

image-20200706132832305

b.使用

  1. 单文件编译

    $node-sass  原有的scss文件 生成的css文件
$node-sass  原有的scss文件 -o 生成目录

# example:
$node-sass a.scss b.css
$node-sass a.scss css_files

  2. 多文件编译

    $node-sass 原有的scss文件目录 -o 生成的css文件目录

# example:
$node-sass c -o d

  3. 文件监听模式

    # 在"1"和"2"的基础上填加"-w"命令行参数即可
$node-sass -w 原有的scss文件 -o 生成目录
$node-sass -w 原有的scss文件目录 -o 生成的css文件目录

# example:
$node-sass -w scss -o css

# 效果：编译进程不结束，监听文件内容

    image-20200706134612609

- dart-sass
a.安装
1. 安装node  https://nodejs.org(官网) 或 https://npm.taobao.org/mirrors/node(镜像)
2. *安装cnpm(不推荐直接将源换为淘宝镜像!!) $npm i -g cnpm --registry=https://registry.npm.taobao.org
3. 安装dart-sass $npm i -g sass  或  $cnpm i -g sass


# 注：该模块为第三方库，所以可以考虑使用cnpm i sass -D(-D == --save-dev)仅对某个小项目当做开发时依赖进行使用
b.使用
/* 该模块的官方文档：https://sass-lang.com/documentation/js-api */


const sass = require('sass');

sass.render({file: scss_filename}, function(err, result) { /* ... */ });
// OR
const result = sass.renderSync({file: scss_filename});

// 注：默认情况下renderSync()的速度是render()的两倍以上，这是由于异步回调所带来的开销而导致的
😀 Ruby环境
a.安装
1.安装Ruby	https://rubyinstaller.org/downloads
2.*配置镜像	$gem sources -a https://gems.ruby-china.com/ -r https://rubygems.org/
3.*查看源 $gem sources -l # 确保只有gems.ruby-china.com一个源
4.安装scss $gem install sass
5.检查是否安装成功 $sass -v

image-20200706141653304

#注：如果出现了SSL错误，修改 ~/.gemrc 文件，增加 ssl_verify_mode: 0 配置
# ~表示用户根目录，windows的文件位置为C:\Users\用户名\.gemrc

---
:sources:
- https://gems.ruby-china.com
:ssl_verify_mode: 0

image-20200706142100322

b.使用
# 注：最好带上"-C --sourcemap=none "参数
# 注：Sass 命令行工具根据文件的拓展名判断所使用的语法格式，没有文件名时 sass 命令默认编译 .sass 文件，添加 --scss 选项或者使用 scss 命令编译 SCSS 文件。

  1. 单文件编译

    $sass  原有的scss文件[:]生成的css文件

# example:
$sass a.scss b.css

  2. 多文件编译

    $sass --watch 原有的scss文件目录:生成的css文件目录
# 注：必须加"--watch"

  3. 文件监听模式

    $sass --watch 原有的scss文件:生成的css文件
$sass --watch 原有的scss文件目录:生成的css文件目录

# example:
$sass --watch -C --sourcemap=none scss:css

# 效果：编译进程不结束，监听文件内容

    image-20200706143409397

    image-20200706164519533

😀 Dart环境
a.安装
1.安装Dart	https://dart.dev/tools/sdk/archive
2.*配置镜像，添加环境变量 https://pub.flutter-io.cn 或 https://mirrors.tuna.tsinghua.edu.cn/dart-pub/
windows打开此电脑,添加系统变量 PUB_HOSTED_URL=https://pub.flutter-io.cn
Linux键入$echo 'export PUB_HOSTED_URL="https://pub.flutter-io.cn"' >> ~/.bashrc 或 /etc/profile

4.安装sass
全局安装：$pub global activate sass				(可执行文件)
项目安装：pubspec.yaml填写好依赖后，执行 $pub get	  (.dart代码)
5.检查是否安装成功$sass -v

image-20200706152755791

image-20200706153705517

b.使用
全局安装模式

  1. 单文件编译

    $sass  原有的scss文件[:]生成的css文件

# example:
$sass a.scss b.css

  2. 多文件编译

    $sass 原有的scss文件目录/:生成的css文件目录/

# example:
$sass scss/:css/

  3. 文件监听模式

    $sass --watch 原有的scss文件:生成的css文件
$sass --watch 原有的scss文件目录:生成的css文件目录
# 注：都必须加上":"

# example:
$sass --watch scss:css

# 效果：编译进程不结束，监听文件内容

image-20200706160732312

局部安装模式
2.运行.dart代码
    // 前提是在pubsepc.yaml文件中添加依赖
    // dev_dependencies:
  	//		sass: lastest

// main.dart
import 'package:sass/sass.dart' as sass;

void main(List<String> args) {
  print(sass.compile(args.first));
}
// or
void main(List<String> args) {
  var result = sass.compile(arguments[0]);
  new File(arguments[1]).writeAsStringSync(result);
}
// dart main.dart styles.scss styles.css

2.依赖编辑器

😀 WebStrom
  • 安装上述命令行工具之一（以node-sass为例演示）
  • 依次打开并点击：webstrom -> Settings -> Tools -> Files Watchers -> + -> 选择SCSS文件标识
  • Name随意写，供自己看而已
  • File Type选择SCSS Style Sheet
  • Scope选择All Places
  • Program选择可执行文件的路径（这里以node-sass为例）
  • Arguments按需选择（这里以* F i l e N a m e FileName FileName: F i l e N a m e W i t h o u t E x t e n s i o n FileNameWithoutExtension FileNameWithoutExtension.css*为例）
  • Output paths to refresh按需选择（这里以* F i l e N a m e W i t h o u t E x t e n s i o n FileNameWithoutExtension FileNameWithoutExtension.css*为例）
  • 点击OK，配置完成
😀 VSCode
  • 安装Easy Sass（编译）和Sass（代码提示）两个插件（注意大小写，否则找不到）
  • 点击插件右下角的设置图标后点击"扩展设置"，最后点击"在settings.json中编辑"，开始设置关于Easy Sass的配置
  • 会自动生成下方图片内的配置

image-20200706185328878

  • 添加*“easysass.targetDir”: p a t h ∗ ， 可 将 编 译 后 的 c s s 文 件 放 入 ∗ path*，可将编译后的css文件放入* path∗，可将编译后的css文件放入∗path*路径下(默认为当前路径)。例如生成到css文件下内

image-20200706185722811

Yz前端知识
关注
专栏目录
Sass 入门（基础知识点汇总）
wuyxinu的博客
12-26 3311
一、Sass简介 在学习Sass之前，我们先来介绍一下什么是CSS预处理器。因为Sass就是众多CSS预处理器中的其中一种。 1、什么是CSS预处理器？ 学过CSS的小伙伴都知道，CSS只是一门描述性的语言，你只能一行一行单纯地描述，并不能像JavaScript那样使用变量、循环、运算等方式来操作。 CSS预处理器的出现，使得我们可以像操作JavaScript那样以“编程”的方式来书写CS...
node-sass 4.12、4.14.1、5 node-sass-loader node_modules 安装包
07-07
通过理解这些知识点，你就能有效地在项目中使用Node-Sass 4.12、4.14.1、5版本以及Sass-Loader，享受到它们带来的便利和效率提升。在实际操作中，根据项目的具体需求选择合适的版本，并遵循最佳实践进行配置和使用。
详解vue-cli中配置sass
08-30
本篇文章主要介绍了详解vue-cli中配置sass ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
sass简易配置
GoldenaArcher的博客
03-19 705
node项目中sass最简易的配置，原网址：Minimum Static Site Setup with Sass，package.json如下： { "name": "project", "version": "0.1.0", "description": "SASS compile|autoprefix|minimize and live-reload dev server using Browsersync for static HTML", "main": "public/index
Sass 开源项目教程
最新发布
gitblog_00792的博客
08-21 239
Sass 开源项目教程 sassSass makes CSS fun!项目地址:https://gitcode.com/gh_mirrors/sa/sass 1. 项目的目录结构及介绍 Sass 项目的目录结构如下： sass/ ├── .github/ │ └── workflows/ ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTI...
sass-安装ruby
donghua-li的博客
09-19 2545
sass是个很方便的工具。个人建议下载他的2.35版本好点。 他的官方地址：                      http://www.ruby-lang.org/en/downloads/ 安装ruby  搭建sass环境，由于sass环境是依赖于ruby的所以要安装ruby  ruby下载地址  下载的版本最好不要是最新的，并且下载时要按照电脑的系统来下载
SASS - 环境搭建
吴吃辣
06-07 223
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS – @extend（继承）指令 SASS – 操作符 SASS – 函数 SASS – 输出格式 Sass的环境搭建分为2步： 安装Ruby，sass程序基于Ruby所以需要先安装Ruby 安...
配置SASS环境
caoPengFlying的博客
09-08 5499
安装ruby 搭建sass环境，由于sass环境是依赖于ruby的所以要安装ruby ruby下载地址 下载的版本最好不要是最新的，并且下载时要按照电脑的系统来下载，操作系统为64位那就下载64的 如果是32位操作系统就下载（86）或者没有写的。 在安装时会提示更改安装路径的页面下面有三个选项 将第二个选项选中 如图 安装sass 安装好ruby之后，在开始界面会有一个 Start C
weui-sass：weui的sass版本
02-05
8. **文档和示例**：为了更好地理解和使用 `weui-sass`，务必查阅官方文档和示例代码，它们会详细介绍如何配置和使用各个组件。 通过深入理解和实践以上知识点，你将能够充分利用 `weui-sass` 在 Rails 项目中构建...
compile-node-sass-0.0.3.zip
11-19
【标题】"compile-node-sass-0.0.3.zip" 涉及的主要知识点是关于Node.js环境下的Sass编译工具，它允许开发者将Sass或SCSS语法转换成CSS，以便在Web开发中使用。Sass是一种强大的CSS预处理器，提供了变量、嵌套规则、...
webpack-react:一个Webpack示例项目，为ES6 React和SASS配置
03-28
下面我们将深入探讨这些知识点。 1. **Webpack配置**：Webpack 的配置文件通常命名为`webpack.config.js`，它定义了如何处理项目中的不同类型的文件。在这个项目中，配置可能包括了入口点(entry)、输出(output)、...
在vue中使用sass的配置的方法
weixin_30625691的博客
06-23 215
1、创建一个基于 webpack 模板的新项目 vue init webpack myvue 2、在当前目录下，安装依赖 cd myvue npm install 3、安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --s...
sass环境配置
前端挖掘机
08-29 2397
1.sass编译环境依赖于ruby   先下载ruby  本次下载的是 rubyinstaller-2.3.1-x64版本 安装 2.将sass文件下载到本地      cmd  命令： get install 路径     ：路径为本地sass文件路径   3.测试是否安装成功：ruby -v   gem -v    sass -v       查看安装的sass版本号 4.   将...
配置sass
记录平时遇到的一些小问题
11-08 236
npm install --save-dev sass npm install --save-dev sass-loader@版本号 注意!注意!sass-loader 一定指定版本号!!! 最新版本会报错! 我是用的是7-3-1 –save-dev 直接帮你在package.json里面配置好 是产品依赖还是开发依赖 会在相应的位置帮你写好, ...
Sass环境配置
junzaivip
06-01 276
Mac版本安装：1. 安装相关的环境//安装如下(如mac安装遇到权限问题需加 sudo gem install sass) gem install sass gem install compass2. 做监听sass --watch Css/Sass:Css/Sass目录结构：监听效果：好处是：样式的变化可以实时的编译。Windows安装：安装地址:https://rubyinstaller.o...
sass编译环境配置
qq_31055177的博客
09-05 395
sass作为css预编译语言，基于Ruby语言开发而成，因此安装sass前需要安装Ruby。 （注:mac下自带Ruby无需在安装Ruby!） sass官网，提供了sass安装的详细步骤！ 优点： Sass可以帮助你在编程结构中编写简洁, 简洁且更少的CSS。 它包含的代码更少, 因此你可以更快地编写CSS。 它是CSS的扩展, 因此更加稳定, 强大和美观。因此, 设计人员和开发人员可以更轻松, 更高效地进行工作。 它与所有版本的CSS兼容。因此, 你可以使用任何可用的CSS库。 它提供了嵌
sass开发环境的安装与配置
weixin_45397724的博客
07-15 799
1.安装ruby.exe; 直接用管理员方式运行ruby.exe文件，剩下提示下一步就可以了 2.验证ruby是否安装成功 打开运行（window+R为快捷键）：输入cmd回车,打开了DOS窗口，再输入 ruby -v （-v前面有个）回车,显示ruby 2.4.1……等字样为安装成功 ...
【sass】配置
qq_34838046的博客
10-05 282
npm install node-sass --save-dev npm install sass-loader --save-dev npm uninstall node-sass --save-dev npm uninstall sass-loader --save-dev vue add style-resources-loader //将scss引入全局 vue.config.js const path = require...
SASS环境搭建
m0_70858457的博客
01-29 361
sass安装
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值