如何使用SASS编写可重用的CSS

时间 2020-01-08

标签如何使用 sass 编写重用 css 栏目 CSS 繁體版

原文原文链接

做者：Obinna Ekwuno
译者：前端小智
来源：proqsolutions

点赞再看，养成习惯
本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。css

Sass 是一个CSS预处理程序，至今使用普遍，它之因此流行，是由于它修复了几个CSS缺陷：html

Sass 也是 Bootstrap 4 运行的基础。这意味着为了理解如何操做引导代码而学习Sass是很是有帮助的，而不是覆盖代码(这是大多数开发人员的定制方法)。理解Sass能够更好地理解源代码级别的工具。前端

当使用CSS时，咱们常常在一个全局环境设置，这样可能会错误地设置元素的样式。css3

自定义CSS(即便有CSS变量)仍然是很是冗余的。CSS不是为咱们今天所拥有的那种复杂的架构设计的，咱们遇到了在另外一个样式表中导入一个样式表的问题，这可能会致使一个很是大的样式库，没有适当的文档可能没法理解它。git

在本文中，咱们将重点讨论为何预处理程序很重要，并特别强调SASS及其将规则组合在一块儿的能力。使用Sass为设计现代web组件提供了一种更合理的方法。github

咱们还将经过演示示例来了解为何要使用这些预处理程序，演示如何将样式划分为更小的特定组件，而没必要强迫用户下载大量不须要的CSS文件。web

安装 sass

sass 的安装方式有不少种，能够查看这个地址，这里咱们使用 npm 安装：面试

npm install -g sass

CSS 存在哪些问题？

在则开始学习前端基础知识时，咱们会接触到传统的 CSS，涉及到使用类或id之类的标识符来处理和操做HTML元素。npm

在使用CSS的时候，咱们常常须要修改样式来实现预期的要求。组织大型样式表确实很压力。保持类的做用域以免意外地设置样式有时候有的很累。bootstrap

即便引入了 CSS 变量以减小声明的重复，但使用预处理器仍能够解决变量的一些问题。例如：较长的变量名。

即便有了CSS3，咱们仍然须要依赖一些技巧来设计用户界面的样式，在编写 HTML 时，嵌套和可视化层次结构样式有助于理解，但这是常规 CSS 作不到。

CSS 预处理器是什么？

能够把预处理器看做是一个加工的机器，一端容许咱们编写独特的语法，另外一端，预处理器帮咱们生成对应的常规的 CSS。CSS 预处理程序一般会增长一些纯CSS中不存在的特性，好比 mixin、嵌套选择器、继承选择器。同时也给了咱们以结构化的方式来编写样式。CSS 预处理程序有 LESS, stylus, Sass, PostCSS。如前所述，本文主要关注做为预处理器的 Sass。

SASS 仍是 SCSS ？

SCSS 是 Sass 3 引入新的语法，其语法彻底兼容 CSS3，而且继承了 Sass 的强大功能。Sass 和 SCSS 实际上是同一种东西，咱们平时都称之为 Sass，二者之间不一样之处有如下两点：

1.文件扩展名不一样，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

2.语法书写方式不一样，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和咱们的 CSS 语法书写方式很是相似。

先来看一个示例：

Sass语法：

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Scss语法：

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

在上面的代码示例中，咱们注意到 Sass 和 SCSS 编写样式的不一样。请注意，它们都使用$来声明变量。

SCSS 中的概念

嵌套和做用域

当设计 HTML文件的样式时，SCSS 使咱们可以在样式表中拥有相同的 HTML 视觉层次结构，这样咱们就能够以一种更容易理解的方式来设计样式。例如，设计这个index.html的样式

<nav class = 'sidebar'>
  <ul>
    <li> <a> </a></li>
  </ul>
</nav>

CSS:

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

SCSS:

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

从上面的 CSS 代码示例能够看出，咱们可以推断 HTML 文件的结构，同时保持实现的简短。这样作的另外一个好处是，它有助于避免拼写错误，并且还能够看到，咱们已经肯定了一些规则的做用域，所以这些样式只用于nav。

后代样式规则适用于 SCSS，例如：

.container{
  .left-area{
    ...
  }
}

这意味着，具备class = "left-area" 的container类的全部后代都将受到规则的影响。基本的CSS 选择器仍然适用于 SCSS，好比：

> 选择器

.container{
  > .left-area{
   ...
 }
}

如今，只有类为container的直接子类才会得到样式。

css 中 “>”是 css3 中特有的选择器 ，A > B 表示选择 A 元素的全部子B元素，与 A B不一样的是， A B 选择全部后代元素，为 A > B只选择 一代。

父选择器(&)

若是咱们想经过添加一个类来修改一个类，咱们可使用父选择器，它主要用于添加辅助样式改变元素样式的状况，这也会起到修饰符的做用，& 在 scss中表示自身的意思。

.container{
  &.right-area{
   background-color : #0000
 }
}

上述代码等同于

.container.right-area {
  background-color : #0000
}

咱们还可使用父选择器将角色限定在另外一个类中，就像这样

在代码示例中，因为父选择器的缘由，color:#fff只适用于.theme-dark类。

变量

一般，在 CSS 中，咱们经过使用@import将不一样的样式表连接到主 CSS 中，这意味着必须下载额外的CSS文件。

若是有一种方法可使用 SCSS 将全部这些输入解析为一个 CSS 文件，该怎么办。 CSS 中变量的概念来自 JS 方法。

请注意，SCSS中的@import用于将部份内容获取到其余SCSS文件中，但它们不会成为 CSS 文件，名称前用_表示。

使用 scss 变量

SCSS中的变量以美圆符号$开头。

$color: #f002
.color{
  $text_color: #ddd;
  background-color: $color;
  color: $text_color;
  text-shadow:0 0 2px darken($text_color, 40%);
}

从上面的代码中，咱们注意到$text_color只能在代码块内访问。

Mixins

SCSS 的另外一个了不得的特性是它可以将可重用的样式打包在一块儿，并容许根据须要将样式导入到另外一个样式块中，从而减小代码中的冗余。

声明

建立mixin很是简单，只需在样式块以前添加@mixin和mixin名称，以下所示

@mixin {insert name} {
     //write CSS code here
}

示例：

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

因为历史缘由，连字符和下划线被认为是相同的，也就是说 @mixin mixin-name { } 和 @mixin mixin_name { } 是同样的。

用法

要在代码块中使用mixin，咱们必须使用@include，而后接mixin的名称。

.button-green {  
    @include button;  
    background-color: green;  
}

这里经过@include调用我以前建立名为button的mixin模块，那么解析后的CSS就以下所示：

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background-color: green;  
}

使用mixin的另外一种方法是使用参数，就像 JS 中的函数同样，咱们能够声明一个全局变量并将其设置为mixin的一个参数，这里更新了上面的button模块，增长了名为background的参数并将其传递给模块。

@mixin button($background) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

注意到参数被设置为一个变量并成为backround属性的值。若是咱们想建立一个绿色的按钮，那么就可使用如下代码：

.button-green {  
    @include button(green);  
}

你可能会好奇若是在定义mixin时定义了参数，可是在@include调用时没有传递参数会发生什么。这种状况下你会收到一个编译错误的提示。同时我相信这种状况必定不是你想看到的。你能够经过在mixin中定义参数的时候给它设置一个默认值，从而来避免这种错误。

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

如今若是你在调用的时候忘记传递参数值:

.button-green {  
  @include button;  
}

你的代码将会使用你设置的参数默认值来解析，在这个例子中也就是green这个值。

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: green;  
}

函数

SCSS 中的函数是 SASS 功能的重要组成部分，它们容许咱们定义可在整个样式表中重用的复杂操做。有不少内置的 Sass 函数可供咱们使用，查看文档了解更多信息。

这里列出了一些经常使用的函数：

lighten($color, $amount)：使颜色更浅。
darken($color, $amount)：使颜色变深。
adjust-hue($color, $degrees)：改变颜色的色调。
mix($color1, $color2, $weight) ：将两种颜色根据必定的比例混合在一块儿，生成另外一种颜色
hue($color) ：获取颜色的色调组件。
saturation($color) ：获取颜色的饱和度组件。
lightness($color) :获取颜色的亮度组件。

咱们也能够定义本身的 Sass 函数，要实现函数的声明和返回内容咱们须要使用function和return两个指令，相似于其余语言中的关键字。

@function 函数名(形参) {
  @return;
}

使用时时直接使用函数名便可:

@function getWidth($w) {
  @return $w * 2;
}

.main{
  max-width: #{getWidth(20)}px;
}

编译后:

.main {
  max-width: 40px;
}

具备控制流的条件样式

if()

if() 是 Sass 的一个内建函数，与之类似的 @if 则是一个内建指令。if() 用来作条件判断并返回特定值，示例以下：

@mixin test($condition) { 
  $color: if($condition, blue, red); 
  color:$color 
}
  
.firstClass { 
  @include test(true); 
} 
 
.secondClass { 
  @include test(false); 
}

编译结果：

.firstClass {
  color: blue; 
} 
.secondClass { 
  color: red; 
}

在上例中，if() 函数内的三个参数分别表明：测试条件，测试成功返回值，测试失败返回值（除了 false 和 null 以外的全部测试条件都被视为测试成功）。若是使用数字做为上述示例的条件，一样会返回测试成功的值：

.firstClass { 
  @include test(1); 
}

@if

@if 后跟一个表达式，若是表达式的结果为 true，则返回特定的样式，示例以下：

@mixin txt($weight) { 
  color: white; 
  @if $weight == bold { font-weight: bold;} 
} 

.txt1 { 
  @include txt(none); 
} 

.txt2 { 
  @include txt(bold); 
}

编译结果：

.txt1 { 
  color: white; 
} 
.txt2 { 
  color: white; 
  font-weight: bold; 
}

@for

@for 指令经常使用于循环输出。@for 有两种使用方式：from start through end 和 from start to end，二者的区别在于，前者遍历的范围是 [start, end], 然后者的遍历范围是 [start, end-1]。在 @for 循环中使用一个固定变量来替代遍历到的元素。若是你想实现从大到小的遍历，只需让 start 大于 end 便可。下面是 @for 的一个简单示例：

@for $i from 1 through 4 { 
  .col-#{$i} { 
    width: 100/4 * $i + %;
  } 
}

使用上面的这个例子，咱们能够建立一套简单的栅格系统，编译结果以下:

.col-1 { 
  width: 25%; 
} 
.col-2 { 
  width: 50%; 
} 
.col-3 { 
  width: 75%; 
} 
.col-4 { 
  width: 100%; 
}

总结

在本文中，咱们试图了解使用SCSS编写功能CSS的基本知识，而且还大体了解了一些Sass/SCSS原理。我但愿咱们将这些实践用于为咱们的应用程序编写更轻松，更优化的样式。

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://www.proqsolutions.com...

交流

干货系列文章汇总以下，以为不错点个Star，欢迎加群互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。

1. 如何使用SASS编写可重用的CSS
2. 如何使用SASS
3. 如何使用SASS?
4. 使用Sass和Compass组合写CSS
5. 如何使用scss/sass
6. 如何将Sass编译成CSS
7. 如何重写网站CSS
8. 在vue2.0项目中使用sass编写css样式
9. 为何使用Sass
10. create-react-app如何使用less/sass和react-css-modules?
更多相关文章...
• XSD 如何使用? - XML Schema 教程
• 使用 CSS 显示 XML - XML 教程
• Git可视化极简易教程 — Git GUI使用方法
• Composer 安装与使用