SCSS学习笔记（一）

2020-05-31 22:55:13 阅读：255 来源： 互联网

标签：SCSS 笔记学习 mixin 10px div CSS left

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;
}

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

标签：SCSS,笔记,学习,mixin,10px,div,CSS,left
来源： https://www.cnblogs.com/10manongit/p/13022172.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9