SCSS学习笔记（一）

simpleapples 发布于2019-08-29 16:37 / 2727人阅读

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

SCSS的由来

SCSS就是加强版的CSS，要讲SCSS那就一定要从SASS讲起

SASS

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。2007年发行，2016年版本稳定，设计和开发分开进行，让这个语言的功能相当完善。

Sass是像CSS一样的层叠样式表语言，但是它并不是由前端社区发明的，而是由Ruby社区发明创造，为什么Ruby社区要为前端创造语言，这是因为Ruby社区中有一个全栈Web框架Rails，这个框架包含前端和后端的开发，所以当Ruby社区的人发现CSS并不好用，就发明了一套语言叫做Sass，下面是Sass语法的特点

#sidebar
  width: 30%
  background-color: #faa

Sass语法如上图所示，它写法极简，省略掉了大括号和分号，但是和python一样，缩进需要严格按照规定，这样子的语法让很多前端工程师很不适应，所以出现了了SCSS，SCSS将括号分号又给添加回来了，例如

#sidebar {
  width: 30%;
  background-color: #faa;
}

你肯定想说，这样又和CSS有什么区别，实际上SCSS保留了SASS的其他部分功能

SCSS的用法

SCSS相较于CSS加入了编程元素，作为CSS的预处理器，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。

变量

SCSS允许使用变量，所有变量以$开头。

$blue : #1875e7;　
div {
　color : $blue;
}

有了变量，当需要集体修改色型的时候就会方便很多

嵌套

SCSS中允许嵌套，例如CSS中

div h1 {
　　color : red;
}

这样的语法可以改写成

div {
  h1 {
    color: red;
  }
}

mixin

mixin可以声明重用一个代码块，例如
使用@mixin定义一个代码块

@mixin left {
　　float: left;
　　margin-left: 10px;
}

使用@include引入这个代码块

div {
　　@include left;
}

编译成CSS是这样的

div {
　　float: left;
　　margin-left: 10px;
}

另外，mixin支持参数，可以像写函数一样写CSS，例如

@mixin left($value: 10px) {//默认是10px
　　float: left;
　　margin-right: $value;
}

引入时，可以自己添加参数

div {
　　@include left(20px);
}

placeholder

一直引入代码块，编译成CSS的时候还是会有很多的重复代码，
使用placeholder可以节省代码，用法是用%定义一个公用样式

%box {
  float: left;
  margin-left: 10px;
}

然后用@extend来调用

.selector { 
  @extend %box; 
}
.nav>ol>li {
  @extend %box;
}

编译成CSS时就是

.selector,
.nav>ol>li {
  float: left;
  margin-left: 10px;
}

不拷贝样式，把选择器提到了样式前面

超融合服务器私有云学习笔记一学习笔记基础学习笔记深度学习笔记

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

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

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

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

Jeff 2019-08-29 16:57 评论0 收藏0
SASS 学习笔记

摘要：中的变量以开头。中的引入文件以下划线开头，在其它文件中引用时，用命令即可，引用时不需要带文件名开头的下划线和扩展名。导入本身就提供了导入的选项，这样就将进一步分割成了代码更少更容易维护的代码段，但是在中每一条语句都会产生一次请求。基础知识这部分内容摘自 Sass Basics。预处理 Preprocessing 预处理功能，就是将 SASS/SCSS 格式的文件输出为 CSS 文...

?xiaoxiao, 2019-08-30 13:04 评论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
我的webpack学习笔记（二）

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

ninefive 2019-08-05 11:39 评论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...

awokezhou 2019-08-29 12:57 评论0 收藏0