SCSS学习笔记(一)

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://segmentfault.com/a/1190000016271184
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞