SCSS入门

1. CSS预处理器

  • 定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。
  • CSS预处理器语言：scss（sass）、LESS等；

2.Sass和SCSS的区别

  • 文件扩展名不同：“.sass”和“.scss”；
  • Sass是以严格缩进式语法规则来书写的，不带大括号和分号；而SCSS的语法和CSS书写语法类似。

3.Sass安装（Windows版）

Paste_Image.png
  • 安装sass：
  • 方法一（通过命令安装sass）：打开命令终端，输入：gem install sass
  • 方法二（本地安装sass）：从http://rubygems.org/gems/sass 下载sass安装包，然后在终端输入: “gem install <把下载的安装包拖到这里>” 然后直接额回车即可安装成功。

4.scss语法格式

css代码：

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

使用scss代码：

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

tip:如果使用sass旧语法（sass语法），文件后缀名应为“.sass”；如果使用sass新语法（scss语法），文件后缀名应为".scss“语法，否则编译时编译不出来。

5. sass编译

5.1 sass编译的方法：

  • 命令编译
  • GUI工具编译
  • 自动化编译

5.1.1 sass命令编译（在命令终端输入sass指令来编译sass，最直接，最简单）

  • 单文件编译：
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
  • 多文件编译：
sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

  • 缺点及解决方法：
    缺点：每次保存scss文件后都要重新编译太麻烦；
    解决方法：开启“watch”功能：
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
  • tip:文件路径不要带中文，如果有中文，watch功能无法正常使用。

6.sass嵌套输出方式nested

Paste_Image.png

只要在编译的时候带上参数“ --style nested”:

sass --watch test.scss:test.css --style nested

7.sass展开输出方式expanded

Paste_Image.png

在编译的时候带上参数“ --style expanded”:

sass --watch test.scss:test.css --style expanded

8.sass展开输出方式compact

Paste_Image.png

在编译的时候带上参数“ --style compact”:

sass --watch test.scss:test.css --style compact

9.sass展开输出方式compressed

Paste_Image.png

在编译的时候带上参数“ --style compressed”:

sass --watch test.scss:test.css --style compressed

10.sass变量声明

$+变量名+：+变量值；

$width:200px;

11.普通变量和默认变量

  • 普通变量声明后可以在全局范围内使用；
  • 默认变量仅需在值后面加上!default 即可；
  • 默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式是在默认变量之前重新声明下变量即可。默认变量的价值在进行组件化开发的时候会非常有用。
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body {
       line-height: $baseLineHeight;
}

编译后的CSS代码：

body {
        line-height:2;
}

12.局部变量和全局变量

  • 局部变量：在元素里面声明的变量；
  • 全局变量：在元素外面定义的变量；
  • 全局变量的影子：和全局变量名字相同的局部变量叫做全局变量的影子。
$color:green;//全局变量
$width:200px;//全局变量
$height:200px;//全局变量
body {
    background-color:$color;//调用全局变量
}
div {
    $color:yellow;//定义局部变量，全局变量$color的影子
    .div {
    background-color:$color;//调用局部变量
    width:$width;//调用全局变量
    height:$height;//调用全局变量
    }
}

13.sass嵌套

13.1 选择器嵌套

<header>
    <nav>
        <a href="#">home</a>
        <a href="#">page</a>
    </nav>
</header>

css:

    nav a {
        color:red;
    }
    header nav a {
        color:green;
    }

scss:

nav {
  a {
    color: red;
    
    header & {
      color:green;
    }
  }  
}

13.2 属性嵌套(有相同的属性前缀)

css:

.box {
     font-size: 12px;
     font-weight: bold;
}

scss:

.box {
  font: {
   size: 12px;
   weight: bold;
  }  
}

13.3 伪类嵌套

scss:

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

css:

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

14. sass混合宏

14.1 声明混合宏

@mixin border-radius {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

@mixin :声明混合宏的关键词；
border-radius:混合宏的名称；
大括号内：复用的样式代码；

14.2 调用混合宏

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}//声明混合宏border-radius
button {
    @include border-radius;
}//调用混合宏border-radius

编译为CSS：

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

14.3 混合宏的参数

  • 不带任何值的参数
@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}//声明一个带有参数$radius的混合宏
.box {
  @include border-radius(3px);//调用混合宏并给混合宏传参数“3px”
}
  • 传一个带值参数（传入一个默认值）
@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}//声明一个传入了默认参数值的混合宏
.btn {
  @include border-radius;//使用默认参数值的混合宏
}
.box { 
  @include border-radius(50%);//可以自己传入参数值
}

编译出来的CSS：

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
  • 传多个参数值
@mixin size($width,$height){
  width: $width;
  height: $height;
}
.box-center {
  @include size(500px,300px);
}

编译出来的css：

.box-center {
  width: 500px;
  height: 300px;
}

15.sass 继承

scss：

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

编译出来后：

.btn, .btn-primary {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
 }
.btn-primary {
  background-color: #f36;
  color: #fff; 
}

在sass中的继承，可以继承类样式块中所有样式代码，而且编译出来的css会将选择器合并在一起，形成组合选择器。

16.sass占位符%

用占位符声明的代码，如果不被@extend调用就不会被编译。

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  color:red;
}

编译后：

.btn {
    color:red;
}//%占位符声明的代码没有被编译产生css代码

使用@extend调用：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;//使用@extend调用占位符代码
  @extend %pt5;
}
.block {
  @extend %mt5;
  span {
    @extend %pt5;
  }
}

编译后的css代码：

.btn, .block {
  margin-top: 5px;
}
.btn, .block span {
  padding-top: 5px;
}

通过@extend调用的占位符，编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。

17.sass插值

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {//对每个在$properties中的$prop,即$properties中的margin、padding
        #{$prop}-#{$side}: $value;//$prop连接参数$side，值为参数$value
    }
}
.login-box {
    @include set-value(top, 14px);//调用混合宏
}

编译出来的css：

.login-box {
  margin-top: 14px;
  padding-top: 14px; 
}

不可以：

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}

也不可以：

@mixin updated-status {
    margin-top: 20px;
    background: #F00;
}
$flag: "status";
.navigation {
    @include updated-#{$flag};
}

可以在使用@extend时使用插值：

%updated-status {
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
}

18. sass 注释

  • /*注释内容*/ :会在编译出来的css文件中显示
  • //注释内容 ：不会在编译出来的css文件中显示
//定义一个占位符
%mt5 {
  margin-top: 5px;
}
/*调用一个占位符*/
.box {
  @extend %mt5;
}

编译出来的css：

.box {
  margin-top: 5px;
}
/*调用一个占位符*/

19. sass运算

19.1 sass 加法/减法

变量或属性中都可以做加法/减法运算

.box {
  width: 20px + 8in;
  height:20px - 5px;
}

编译出来的css：

.box {
  width: 788px;
  height:25px;
}

不用类型的单位做加法/减法会报错：

.box {
  width: 20px + 1em;//不同类型单位不能做加法
}

19.2 sass 乘法

这样子会有问题：

.box {
  width:10px * 2px;  
}

应该这样子：

.box {
  width: 10px * 2;
}

编译出来的css：

.box {
  width: 20px;
}
  • 同加法减法一样，不同类型单位做乘法也会报错。

19.3 sass除法

  • 如果除式中没有变量或者不是在一个数学表达式中（有加法减法等），就要将除式运算用小括号括起来，否则“/”不会被当做除号运算。
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

编译出来的css：

p {
  font: 10px/8px;//这种是无意义的css
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }
  • 除法中相同单位相除不会报错，会产生一个无单位的值：
.box {
  width: (1000px / 100px);
}

编译出来的css：

.box {
  width: 10;
}

19.4 sass 变量计算

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;
.container {
  width: $content-width + $sidebar-width + $gutter;
}

编译出来的css：

.container {
  width: 960px;
}

19.5 sass数字运算

.box {
  width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}

编译出来的css：

.box {
  width: 60px;
}

19.6 sass颜色运算

所有算术运算都支持颜色值，并且是分段计算的。

p {
  color: #010203 + #040506;
}

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：

p {
  color: #050709;
}
  • 数字和颜色一起运算：
p {
  color: #010203 * 2;
}

计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为：

p {
  color: #020406;
}

19.7 sass 字符运算

  • 用“+”对字符串进行连接：
$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

编译出来的css：

.box:before {
  content: " Hello Sass! ";
}
  • 可以使用“+”直接连接字符：
div {
  cursor: e + -resize;
}

编译出来的css：

div {
  cursor: e-resize;
}
  • 有引号的字符串和没有引号的字符串相加，看哪个在“+”号的左边，如果有引号的在左边，结果为有引号的；如果没有引号的在左边，结果为没有引号的：
p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译出来的css：

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,948评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,371评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,490评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,521评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,627评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,842评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,997评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,741评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,203评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,339评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,955评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2赞 349

推荐阅读更多精彩内容

  • Sass 基础
    1、SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里...
    夜幕小草阅读 1,707评论 2赞 10
  • sass语法
    基础 声明变量 普通变量 默认变量 变量覆盖：只需要在默认变量之前重新声明下变量即可 变量的调用 局部变量和全局变...
    Jill1231阅读 1,270评论 0赞 1
  • Sass入门（1）
    前言 什么是CSS预处理器 定义：CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增...
    SA_Arthur阅读 3,117评论 0赞 18
  • 再谈CSS 预处理器
    再谈CSS 预处理器2016-09-09 Justineo JavaScript转自：http://efe.bai...
    抓住时间的尾巴吧阅读 1,561评论 0赞 2
  • 广
    东清远
    戒尺Z阅读 206评论 0赞 0