scss:最常见的css预处理器

scss:最常见的css预处理器

Tags
CSS
SC(A)SS
前端样式
CreatedTime
Aug 22, 2022 03:06 PM
Slug
2018-05-29-scss-fisrt-step
UpdatedTime
Last updated August 22, 2022

背景

SassSCSS 其实是同一种东西,我们平时都称之为 Sass
他们都是用Ruby开发 Css 预处理器,boostrap4已经将less换成了scss

SCSSSass

SassSCSS 其实是同一种东西,我们平时都称之为 Sass他们都是用Ruby开发 Css 预处理器,boostrap4已经将less换成了sass
不同之处:
  • 文件拓展名:分别是sassscss
  • 缩进:sass严格缩进(类似 python 和 ruby),scss是 css 的缩进样式
  • 是否兼容 css 语法:显然,由于缩进的不同,scss是兼容原生的 css 写法。
总的来说,scsssass升级版,兼容 css 语法,并且有着自己的独立语法。

环境配置

  1. 安装 ruby:windows 注意添加注册表路径
  1. 安装 sass:利用 ruby 的包管理器gem安装,命令行运行:gem install sass
  1. 升级和删除 sass:gem update/uninstall sass
如果国外源过慢?
gem sources --remove <https://rubygems.org/> gem sources -a <https://ruby.taobao.org/> gem sources -l #查看是不是淘宝源

编译

编译指的是:将 scss 文件编译为 css 文件的过程。

源文件编译

单文件编译
# 格式:sass 待编译的Sass文件名:编译后CSS文件名 scss scss.scss:css.css
实时自动编译
使用--watch参数即可,scss 会在源文件改动时候,自动重新编译。
scss --watch scss.scss:css.css # 方便

输出文件风格

命令行编译时候,使用--style参数。
一段 scss 代码:
body { h1 { color: red; } }
默认:嵌套输出方式 nested
body h1 { color: red; }
展开输出方式 expanded
body h1 { color: red; }
紧凑输出方式 compact
body h1 { color: red; }
压缩输出方式 compressed
body h1 { color: red; }

注意

最新的 scss 开启了sourcemap功能,--sourcemap参数默认添加。