Sass入门和使用总结

图片发自简书App

写在前面的话，放假之前答应自己，一定要在放假的时间里写一篇技术博客，答应自己的事一定要说到做到。发现自己写了那么多博客，看的人真的是寥寥无几啊，我仔细了一下，大概是因为我写的都是大家都知道的吧，因为这里面有很多都是我自己学习的笔记。那我以后就写一些比较新的东西，之前放出来的都是老的，旧的知识，所以大家才不喜欢吧。虽然说，写作其实是写给自己看的，因为你在写下这番话的时候，你心里想要表达的，你就知道了你懂不懂，你能不能写出来了，所以写技术博客的话，你只要能写出来，那么说明你对这部分知识的掌握就已经可以了。不过我还是想得到大家的肯定啊！！！牢骚说完，该开始了。

我们这里用两个部分来说明吧。

1.如何学习Scss
2.如何使用Scss

1.如何学习Scss

学习Scss的第一步不是你要知道什么是Scss的概念啊什么的，而是找到一个合适的资源从头开始学习，我在这里推荐慕课网的资源Sass入门篇，还有Sass进阶篇，sass中文官网
大家学习完以后，基本上就什么会了。

这里我整理一下它的一些重要的概念。基本上如果你知道这些，基本的使用就可以了。

Sass是什么？

Sass并不是其他的什么，而是CSS预处理器，预处理器就是定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这些语言进行编码工作。

果然，概念就不是给人看的。用CSS预处理器可以让你的编码效率提高十倍。就是这样...

还有很多其他的CSS预处理器，比如

Sass（SCSS）
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS

其中最优秀的技师Sass、LESS和Stylus，在这里，我们聊一下Sass.

Sass 和 SCSS 有什么区别？

其实这两货说的是一个东东，由于一开始Sass规定的语法格式是严格的缩进式语法，不带大括号和分号，所以造成程序员在写sass的时候有非常大的不习惯，虽然它是最早的预处理器，却没有人家LESS用的人多，所以又支持了使用大括号和分号，这就是SCSS.

1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

看代码：Sass语法

   $font-stack: Helvetica, sans-serif  //定义变量
   $primary-color: #333 //定义变量
   
   body
     font: 100% $font-stack
     color: $primary-color

Scss语法：

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

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

SASS环境的安装

Mac版的安装

Windows版的安装

Sass的基本特性-基础

声明变量
image

上面的图告诉大家，Sass的变量包括了三个部分：

1. 声明变量的符号“$”
2.变量名称
3.赋予变量的值

例如：

brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color : #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;

!default表示的是默认值。

普通变量与默认变量

上面我们知道，如果想要设置默认值，只需要!default在值的后面就可以了。

那么如果我们想要覆盖的时候怎么办呢，就是在前面申明一个就行。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后：

body{
    line-height:2;
}

嵌套-选择器嵌套

Sass 的嵌套分为三种：

选择器嵌套
属性嵌套
伪类嵌套

下面我们看选择器嵌套，例如我们有一段这样的结构：

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

如果想要选中header中的a标签，在写CSS会这样写：

nav a {
    calor:red;
}

header nav a {
    color:green;
}

在Sass中，就可以使用选择器嵌套来实现：

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

嵌套-属性嵌套

Sass提供的属性嵌套主要是针对CSS有一些属性前缀相同，只是后缀不一样，比如border-top/border-right还有
margin,padding,font等属性，假设你的样式中用到了：

.box{
    border-top:1px solid red;
    border-bottom:1px solid green;
}

在Sass中，我们可以这样写：

.box{
    border:{
        top:1px solid red;
        bottom:1px solid green;
    }
}

嵌套-伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。我们就拿经典的“clearfix”为例吧：

.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;
}
避免选择器嵌套：
选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

混合宏-声明混合宏

混合宏的出现主要是为了解决当样式变得越来越多，越来越复杂的时候，需要重复使用大段样式时，而使用变量又无法达到我们的目的，这个时候就要用到了混合宏。

1.声明混合宏

我们通过@mixin来声明一个混合宏：

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

其中@mixin是混合宏的关键词，类似于css中的@media,@font-face一样。border-radius是混合宏的名称。大括号里面是复用的样式代码。

2.带参数混合宏

我们可以定义混合宏时带有参数：

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

3.复杂的混合宏

我们可以在大括号里面写上逻辑关系

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

这个box-shadow的混合宏，带有多个参数，这个时候可以使用...来代替。
上面的意思是当$shadow的参数数值大于或等于1时，表示有多个阴影值，反之调用默认的参数值

混合宏的调用

我们通过关键词@include来调用声明好的混合宏，然后如果需要传参数，我们就传入参数；

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

使用：

button {
    @include border-radius;
}

混合宏的参数

1.传一个不带值的参数

我们在混合宏中，可以传一个不带任何值的参数：

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

我们定义了一个不带任何值的参数$radius,然后我们在调用的时候给这个参数传值：

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

2.传一个带值的参数

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

在混合宏声明的时候，我们给这个参数的添加了一个默认值。5px我们可以传参数，同样也可以不传。

.btn{
    @include border-radus;
    
}

3.混合宏传多个参数
混合宏可以传多个参数：例如：

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

使用的时候一样

.box-center{
    @include center(500px,300px);
}

这个混合宏和我们编程里的函数很像啊。

混合宏的不足

混合宏的不足的地方就是不能智能的合并相同的代码。它的缺点和它的优点一样重要，这样我们才能在合适的地方用合适的代码。

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

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}

在代码中，.box和.btn中都调用了定义好的border-radius混合宏，然后我们看一下编译出来的CSS

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

上面的代码可以很明显的看出，Sass在调用相同的混合宏时，并不能智能的将相同的样式代码合并在一起。

Scss代码的继承

Scss代码的继承是通过关键字@extned来实现的。比如：

.btn{
    border:1px solid #ccc;
    padding:6px 10px;
    font-size:14px;
}

.btn-primary{
    background-color:#f36;
    color:#fff;
    @extend .btn;
}


.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

就是这样继承的，编译出来后的CSS

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

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

占位符 % placeholder

Sass中的占位符%placeholder功能非常强大，它非常适合去做样式的基类。因为，如果我们不通过@extend调用的时候，不会产生任何代码。例如：

%mt5{
    margin-top:5px;
}
%pt5{
    padding-top:5px;
}
.btn{
    @extend %mt5;
    @extend %pt5;
}

.block {
    @extend %mt5;
    
    span {
        @extend %pt5;
    }
}

我们看编译后的代码：

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

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

我们可以看到，通过@extend调用的占位符，编译出来的代码将相同的代码合并在一起，这样让你的代码更加干净。

混合宏 VS 继承 VS 占位符

我们这里总结一下，看图就好：


image

插值#{}

通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name:foo;
$attr:border;
p.#{$name}{
    #{$attr}-color:blue;
}

编译为：

p.foo{
    border-color:blue;
}

#{}插值语句也可以在属性值中插入SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用#{}可以避免Sass运行运算表达式，直接编译CSS.

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为：

p {
    font:12px /30px;
}

上面基础的Scss语法就介绍到这里.

2.如何使用Scss

首先，我们需要安装依赖包

//在项目下，运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

css-loader和style-loader也是必须的依赖包:

css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；
style-loader将所有的计算后的样式加入页面中；

下面是webpack.config.js文件的部分配置：

var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
module.exports = {
    ....
    module: {
        loaders: [
            //解析.css文件
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style", 'css')
            },
            //解析.vue文件
            {
                test: /\.vue$/,
                loader: 'vue'
            }, 
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及<style lang="sass">...</style>声明的内部样式进行加载
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
            }
        ]
    },
    //.vue文件的配置，以下是为了在.vue文件中使用ES6语法（必须安装babel相关的依赖包），以及把使用css或sass语法的样式提取出来，如果不需要可以忽略
    vue: {
        loaders: {
            js: 'babel', 
            css: ExtractTextPlugin.extract("css"),
            sass: ExtractTextPlugin.extract("css!sass")            
        },
    },
    plugins: [
        new ExtractTextPlugin("style.css") //提取出来的样式放在style.css文件中
    ]
    ....
}

使用的时候直接import就可以了,引入外部样式，下面两种写法都可以用：

import '../../css/test.scss'
require('../../css/test2.scss');

我们在react js中就可以这样写：
在.vue文件中使用：

<style lang="sass">
     //sass语法样式
</style>

这里的使用部分参考了：webpack配置sass模块的加载

这里分享一个我自己写的base_layout.Scss：

颜色和大小 base.scss

/**
 * 字体和颜色，基础布局的base文件
 */
//字体大小
$remindTitleSize:20px;
$navigationSize:18px;
$contentSize:17px;
$buttonSize:16px;
$tabFontSize:15px;
$minorSize:14px;
$smalltitleSize:13px;
$smallerSize:12px;
$assistSize:11px;

//颜色
$white:#fff;
$assistColor:#c1c1c1;
$minorColor:#8e8e8e;
$contentColor:#5e5e5e;
$remindColor:#ee5765;
$buttonColor:#7d9ef0;
$backgroundColor:#f0f0f0;
$lineColor:#e8e8e8;
$headerTextColor:#5c5c5c;
$titleColor:#333333;
$circleColor:#FFF9c6;

样式表：base_layout.scss:

//基础布局文件
@import "base";

%flex{
  flex: 1;
  -webkit-flex: 1;
}

.base {
  display: flex;
  display: -webkit-flex;
}

//横向布局
.base_row {
  @extend .base;
  flex-direction: row; -webkit-flex-direction: row;
}

//竖向布局
.base_column{
  @extend .base;
  flex-direction: column; -webkit-flex-direction: column;
}

@mixin justify-content($layout:center){
  justify-content: $layout;
  -webkit-justify-content: $layout;
}

@mixin align-items($layout:center){
  align-items: $layout;
  -webkit-align-items: $layout;
}

@mixin get_font_size($fontSize:14px){
  font-size: $fontSize;
}

//竖向居中对齐
.base_column_justify_center {
  @extend .base_column;
  @include justify-content(center);
}

//横向居中对齐
.base_row_justify_center {
  @extend .base_row;
  @include justify-content(center);
}

//竖向垂直居中齐
.base_column_align_center {
  @extend .base_column;
  @include align-items(center);
}

//横向垂直居中对齐
.base_row_align_center {
  @extend .base_row;
  @include align-items(center);
}

//居中
.base_center {
  @extend .base;
  @include justify-content(center);
  @include align-items(center);
}

.base_row_justify_space-between{
  @extend .base_row;
  @include justify-content(space-between);
}

.base_row_title_layout{
  @extend .base_row_align_center;
  @include justify-content(space-between);
}

//页面container根布局
.page_container {
  flex: 1;
  -webkit-flex: 1;
  flex-direction: column; -webkit-flex-direction: column;
  display: flex;
  display: -webkit-flex;
  background: $backgroundColor;
  font-size: 15px;
}

.page_context {
  @extend .base_column;
  @extend %flex;
  overflow: scroll;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  overflow-x: hidden;
}

//如果有需要，自己添加...

我们可以把一些常用个布局封装到base_layout.scss中，当使用的时候自己组装，使用，继承，扩展...

写到这里就Over了，祝大家五一快乐！

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