SASS 学习笔记

?xiaoxiao, 发布于2019-08-30 13:04 / 1120人阅读

摘要：中的变量以开头。中的引入文件以下划线开头，在其它文件中引用时，用命令即可，引用时不需要带文件名开头的下划线和扩展名。导入本身就提供了导入的选项，这样就将进一步分割成了代码更少更容易维护的代码段，但是在中每一条语句都会产生一次请求。

基础知识

这部分内容摘自 Sass Basics。

预处理 Preprocessing

预处理功能，就是将 SASS/SCSS 格式的文件输出为 CSS 文件，可以对单个文件进行预处理，也可以对指定目录进行预处理，还可以对指定目录进行实时监控，基本语法如下：

sass input.scss output.css
sass --watch app/sass:public/stylesheets

变量 Variables

有了变量功能，就可以很方便地实现一处定义、多处使用，终于不用一遍遍地复制粘贴了。SASS 中的变量以 $ 开头。

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

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

输出后的 CSS 文件如下所示：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

嵌套 Nesting

有了嵌套功能，可以更高效地书写 CSS，不过嵌套的层数过多会使得代码质量严重下降，所以要严格控制嵌套的层数，以不超过三层为宜。

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

  li { display: inline-block; }

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

处理后生成的 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;
}

引入 Partials

引入文件与 C/C++ 中的头文件很相似，都是把常用的代码段保存至文件中，然后在其它文件中引用。SASS 中的引入文件以下划线开头：_partial.sass，在其它文件中引用时，用命令 @import partial 即可，引用时不需要带文件名开头的下划线和扩展名。

导入 Import

CSS 本身就提供了导入的选项，这样就将 CSS 进一步分割成了代码更少、更容易维护的代码段，但是在 CSS 中每一条 @import 语句都会产生一次 HTTP 请求。SASS 则在此基础上进一步做了改进，每一个需要从别处导入内容的 CSS 文件，SASS 都会将需要导入的内容合并到当前的 CSS 文件中，这样就不会有 CSS 那样产生额外的 HTTP 请求的情况了。

比如现在有一个引入文件 _reset.scss，在另一个文件 base.scss 中要引用它，两个文件内容如下所示：

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

// base.scss

@import "reset";

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

经过 SASS 处理后，最终的 CSS 文件如下：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

混合 Mixins

有时候同一个属性为了考虑到浏览器兼容性，就需要写好几行类似的语句，如果这组属性值还会经常变，改动起来的工作量可就要了老命了。不过 SASS 提供了混合功能，就能够让我们“一次修改，整体更新”。这个混合功能，其实和常见的编程语言中的函数功能很相似，看代码：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

通过上面的代码，就很容易能看明白混合是如何定义并被调用的，这里还用到了前面介绍的变量概念。最后生成的 CSS 如下所示：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

这个示例代码还涉及到了浏览器前缀这个概念，Vendor Prefix:为什么需要浏览器引擎前缀这篇文章也讲了浏览器前缀的作用、适用情况及其用法，但是之后即将学习的 Gulp 可以集成 Autoprefixer，这样就可以把补充浏览器前缀的工作交给自动化工具，所以在这里不再深入讨论这个概念了。

继承 Extend/Inheritance

继承可是 SASS 中最常用的功能之一，通过 @extend 命令，可以将应用于一个选择器的属性分享给另一个选择器，这样就可以进一步简化 SASS 的代码了。比如下面的示例代码先是创建了一个基础的 message 选择器，然后在此基础上又创建了 success、error、warning 这三个“派生”的选择器，它们仨共享 message 的属性，同时各自又有不同的边框属性。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

并且最终生成的 CSS 代码也很简洁，怎么样，很不错吧？

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

运算符 Operators

在 SASS 中，还可以进行简单的加减乘除以及取余这五种运算。

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

上面的代码创建了一套基础宽度为 960px 的流式网格（fluid grid），并且根据不同部分的宽度计算其对应的百分比，所生成的 CSS 如下：

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

好了，基础知识就讲到这里了，现在就拿起自己的代码来练习吧！

GPU云服务器云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115290.html

学习笔记 - Sass的安装与使用手册

摘要：现在将学习笔记整理在这里，供大家参考。的安装的编辑器安装方法有很多，大致能分为两种应用程序和命令行界面。如果已经安装过，也可以使用指令如果提示权限不足，在命令行前加上即可。参考网页编辑器的使用的使用很简单，记住两条指令即可。最近因为工作需要，自学了Sass。现在将学习笔记整理在这里，供大家参考。 1. Sass的安装 Sass的编辑器安装方法有很多，大致能分为两种：应用程序（appl...

Jeff 2019-08-29 16:57 评论0 收藏0
sass学习笔记--混合宏

摘要：申明混合宏不带参数混合宏在中，使用来声明一个混合宏。如其中是用来声明混合宏的关键词，有点类似中的一样。是混合宏的名称。什么时候使用混合宏如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。...

Wildcard 2019-08-29 12:45 评论0 收藏0
SCSS学习笔记（一）

摘要：的由来就是加强版的，要讲那就一定要从讲起英文全称是一个最初由设计并由开发的层叠样式表语言。年发行，年版本稳定，设计和开发分开进行，让这个语言的功能相当完善。变量允许使用变量，所有变量以开头。 SCSS的由来 SCSS就是加强版的CSS，要讲SCSS那就一定要从SASS讲起 SASS Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Ha...

simpleapples 2019-08-29 16:37 评论0 收藏0
Laravel学习笔记三-前端工作流

摘要：本节将学习是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令来强制安装所有模块，不管该模块之前是否安装过由于国内墙的原因，使用安装会非常缓慢，慢到想切，不过还好，我们可以使用淘宝提供的国内镜像进行下载。本节将学习 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。一、句法强大的样式表Sass Sass 是一种可用于编写CSS的语言...

liuchengxu 2019-06-27 15:14 评论0 收藏0
我的webpack学习笔记（二）

前言上一篇文章我们讲了多页面js的打包，本篇文章我们继续scss的打包。多页面css单独打包首先，我们css编写采用的是sass，所以我们先来安装sass-loader以及可以用到的依赖 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安装完loaders，下面在webpack.config.js...

mcterry 2019-08-20 18:05 评论0 收藏0