Scss/Sass技术分享和实践

一、目的

主要是解决项目中页面样式不统一、减少冗余代码，提高了样式代码的可维护性

二、什么是CSS 预处理器

1、出现的背景

css的语法不够强大，不能嵌套书写，导致模块化开发中会出现很多重复的选择器，没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护，增加了许多工作量。

使用CSS预处理器，提供了 CSS 缺失的样式层复用机制、扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，减少冗余代码，提高了样式代码的可维护性。

2、定义

就是用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。

CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS。

SCSS和SASS 有什么区别呢

· 文件扩展名不同，文件后缀分别是“.scss”和“.sass”

· sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；sass的安装和使用不细说了；

· scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟

2、常见的CSS处理器 LESS 和 SASS

相同之处：

  • LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。
  • 都可以通过自带的插件，转成相对应的css文件。
  • 都可以参数混入，可以传递参数的class，就像函数一样
  • 嵌套的规则相同，都是class嵌套class

区别：

  • Less环境较Sass简单
    Sass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。

  • Less使用较Sass简单

  • Sass较Less略强大一些
    sass有变量和作用域；sass有函数的概念；进程控制；数据结构等；

  • Less与Sass处理机制不一样
    前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点；

    代码区别

    1、变量插值

LESS采用@{XXXX}的形式，SCSS采用${XXXX}的形式

2、scss支持条件语句，less不支持

SCSS可以使用if{}else，for循环等等，LESS不支持

3、应用外部css文件方式不同

SCSS应用的css文件名必须以‘_’开头（下划线），文件名如果以下划线开头的话，sass会认为改文件是一个应用文件，不会将它转成css文件

4、颜色函数

调整色相的话，LESS使用spin（）的函数；SCSS使用名为adjust_hue()的函数

5、引用父选择器&符号的使用

LESS和SCSS都可以使用&符号表示父选择器，但是SCSS的&符号只能出现在一个组合选择器的开始位置，LESS则没有这个限制

3、为什么选择使用Sass而不是Less？

  • Sass有更成熟的框架，比如说Compass，而且有很多框架也使用Sass，比如说Foundation；
  • 就国外讨论的热度来说，Sass绝对优于less；
  • 在国内less集中的教程是less中文官网，而Sass的中文教程，在国内较为普遍；
  • sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护；
  • scss对sass语法进行了改良，sass 3变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进;
  • bootstrap（Web框架）最新推出的版本4，使用的就是Sass，可以看出sass有更多市场价值。

二、SASS是什么

1、定义

Sass 是一款强化 CSS 的辅助工具

CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、**导入 **(inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。

使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 完全兼容所有版本的 CSS。

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass 生成良好格式化的 CSS 代码，易于组织和维护。

Sass 文件后缀为 .scss。

三、为什么要用Scss

(1) Scss完全兼容所有版本的CSS。

(2) 特性丰富，Scss拥有比其他任何CSS扩展语言更多的功能和特性。

(3) 技术成熟，功能强大。

(4) 行业认可，越来越多的人使用Scss。

(5) 社区庞大，大多数科技企业和成百上千名开发者为Sass提供支持。

(6) 有无数框架使用Scss构建，如Compass、Bootstrap、Bourbon和Susy。

(7) CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。

四、怎么用

4.1、npm安装

# 安装
npm install -g sass

# 版本
sass --version

4.2、变量

Sass 变量可以存储以下信息：

  • 字符串
  • 数字
  • 颜色值
  • 布尔值
  • 列表
  • null 值
/* 定义变量与值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* 使用变量 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

4.3、变量作用域

Sass 变量的作用域只能在当前的层级上有效果

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

4.4、Sass 嵌套规则与属性

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。

如下我们嵌套一个导航栏的样式：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Sass嵌套属性

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

4.5、 Sass @import

定义一些变量定义的文件、颜色相关的文件、字体相关的文件，使用@import引入

Sass @import 指令语法如下:

@import filename;
// 全局变量
@import './variables.scss';
// ele样式覆盖
@import './element-ui.scss';

4.6、 Sass Partials

如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件

Sass Partials 语法格式：

_filename;

注意：请不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略

4.7、Sass @mixin

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

注意：Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。

4.8、Sass@include

@include 指令可用于包含一混入：

.danger {
  @include important-text;
  background-color: green;
}

混入中也可以包含混入

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

向混入传递变量

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}

混入的参数也可以定义默认值

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

在包含混入时，你只需要传递需要的变量名及其值：

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

可变参数

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

浏览器前缀使用混入

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

4.9、Sass @extend 与 继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

使用 @extend 后，我们在 HTML 按钮标签中就不需要指定多个类 class="button-basic button-report" ，只需要设置 class="button-report" 类就好了。

@extend 很好的体现了代码的复用.

4.10、函数

Sass 字符串相关函数

Sass 数字相关函数

Sass 列表(List)相关函数

Sass 映射(Map)相关函数

Sass 选择器相关函数

Sass Introspection 相关函数

Sass 颜色相关函数

4.11、Scss中公共变量的导出方法 export

:export 关键词

$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;
:export {
  menuText: $menuText;
}

4.12、·变量嵌套引用：即字符串插值，需要使用 #{} 来进行包裹

left : left ;
.father02 {
   width : 300px ;
   height : 300px ;
   border : $border ; //使用全局变量
   border- #{$left} : 2px solid purple ; //使用字符串插值之前必须先声明
}

4.13、使用@function 自定义函数及使用

@function double ( $sn ){ //SCSS允许自定义函数
   @return $sn * 2 ;
}
.myText {
   border : 1px solid red ;
   width : double ( 200px ); //使用在SCSS中自定义的函数
}

4.14、·SCSS占位符 %

使用% 声明的代码块，如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。

%m5 { background-color : lightblue ;}
.P1 { @extend %m5 ; }

五、:root

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

声明全局css变量

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容