[Sass]-Sass入门

头像
fmain
    阅读 7 分钟
    1

    初识Sass

    SASS简介

    sass是一种css预处理器，用专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。Sass是CSS3的扩展，它增加了嵌套规则，变量，mixins，选择器继承等等。Sass生成格式良好的CSS，使样式表更易于组织和维护。

    .sass和.scss区别：

    .sass最初是为了配合haml而设计，所有有着和haml一样的缩进风格，从第三代开始，保留缩进风格，完全向下兼容普通的css代码。推荐使用.scss

    compass 是一个开源的css创作框架（一个技术类库）。在sass基础上封装了一系列有用的模块和模板，补充sass的功能

    推荐链接： sass中文网 | sass入门 | sass用法指南-阮一峰

    安装

    • window下安装SASS首先需要安装 (Ruby)[https://rubyinstaller.org/dow...
      安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
    • 安装完成后需测试安装有没有成功,运行CMD输入ruby -v。如安装成功会打印ruby版本号
    • 更换gem源（使用淘宝的gem源https://ruby.taobao.org/）

    1.删除原gem源gem sources --remove https://rubygems.org/

    2.添加国内淘宝源gem sources -a https://ruby.taobao.org/

    3.打印是否替换成功gem sources -l

    4.更换成功后打印如下:

    *** CURRENT SOURCES ***
https://ruby.taobao.org/

    • 安装Sass和Compass

      //安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

    • sass常用更新、查看版本、sass命令帮助等命令：

      //更新sass
gem update sass

//查看sass版本
sass -v

//查看sass帮助
sass -h

    编译sass

    sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

    //单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

//编译格式
sass --watch input.scss:output.css --style compact

//编译添加调试map
sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息
sass --watch input.scss:output.css --debug-info

    数据类型

    • Number
    • String
    • List
    • Map
    • Color
    • Boolean
    • Null
    // 数字类型
$n1: 1.2;
$n2: 12;
$n3: 12px;

// 字符串类型
$s1: content;
$s2: 'content';

// bool类型
$true: true;
$false: false;

// Null 类型
$null: null;

// color 类型
$c1: blue;
$c2: #000;
$c3: rbga(0,0,0,0.3);

.#{$s1}{
    @if $null == null {
        font-size: $n3
    }
}

    变量

    sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

    默认变量

    sass的默认变量仅需要在值后面加上!default即可。

    sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可

    多值变量

    多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

    • list。list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值
    • map。map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。

    全局变量

    在{}内定义的变量，在{}外访问不到。如果需要在全局访问，需要在变量值后面加上!global即为全局变量。

    特殊变量

    一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

    未编译样式 Scss

    body {
    $c_blue: blue;

    header {

        // 局部变量
        $c_red: red;

        // 全局变量
        $c_yellow: yellow !global;
        color: $c_red; 

        // 默认变量
        $fz: 14px;
        $fz: 12px !default;
        font-size: $fz;

        // 多值变量
        $padding: 2px 4px 6px 8px; // 类似数组
        padding: $padding;
        padding-left: nth($padding, 1); // 下标从1开始

        $maps: (color:red, fz: 13px); // 类似json
        background: map-get($maps, color);

        // 特殊变量
        $display: disp;
        
        .#{$display}{
            width: 10px;
            height: 10px;
        }
    }
    footer {
        color: $c_blue;
        color: $c_yellow;
        // color: $c_red; // Undefined variable: "$color".
    }
}

    编译后样式 Css

    body header {
  color: red;
  font-size: 14px;
  padding: 2px 4px 6px 8px;
  padding-left: 2px;
  background: red; }
  body header .disp {
    width: 10px;
    height: 10px; }
body footer {
  color: blue;
  color: yellow; }

/*# sourceMappingURL=test.css.map */

    导入

    sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。

    原生css导入

    如果在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
    以下为原生css导入：

    1. 被导入文件的名字以.css结尾
      @import '***.css'
    2. 被导入文件的名字是一个URL地址
      @import 'http://***'
    3. 被导入文件的名字是css的url{}值
      @import url(*.css)

    Sass导入

    所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

    嵌套

    选择器嵌套

    选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

    & 父选择器的标识符

    &表示父元素选择器，常用 &:hover

    群组选择器的嵌套

    .container {
  h1, h2, h3 {margin-bottom: .8em}
}

    子组合选择器和同层组合选择器 > +和~

    1. 子组合选择器>选择一个元素的直接子元素。(只会选择article下紧跟着的子元素中命中section选择器的元素)
    article > section { border: 1px solid #ccc }
    1. 同层相邻组合选择器+选择header元素后紧跟的元素
    header + p { font-size: 1.1em }
    1. 同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素
    article ~ article { border-top: 1px dashed #ccc }

    属性的嵌套

    属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

    border后面必须加上冒号。

    @at-root 跳出嵌套

    • @at-root
      用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。
    • @at-root (without: ...)和@at-root (with: ...)
      默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。

    @at-root &组合

    未编译样式 Scss

    body {
    header {
        border: {
            color: red;
            radius: 5px;
        }

        a {
            text-align: center;

            &:hover {
                text-align: left;
            }
            @at-root .content {
                width: 100px;
            }
        }
    }
}
@media screen and (max-width:520px){
    @at-root (without:media rule){
        .content {
            height: 200px;
        }
    }
}
@at-root .text-info {
    color: red;

    @at-root nav &{
        color: blue;
    }
}

    编译后样式 Css

    body header {
  border-color: red;
  border-radius: 5px; }
  body header a {
    text-align: center; }
    body header a:hover {
      text-align: left; }
    .content {
      width: 100px; }

.content {
  height: 200px; }
.text-info {
  color: red; }
  nav .text-info {
    color: blue; }

    继承

    选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

    多继承

    一个选择器中有多个继承

    链式继承

    .b 继承.a, .c 继承.b ...

    局限性

    不支持包含选择器(.a .b),相邻兄弟选择器(.a + .b)
    a如果有:hover ,hover状态也被继承

    占位选择器 %

    如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

    未编译样式 Scss

    
.header {
    background: blue;
}
.footer {
    font-size: 12px;
}
.sidebar {
    width: 12px
}
.content {
    height: 13px
}
// 多继承
.content-header {
    @extend .header;
    @extend .footer;
    @extend .sidebar, .content;
    color: red;
}

// 链式继承
.a {
    width: 12px
}
.b {
    @extend .a;
    height: 13px;
}
.c {
    @extend .b;
    border: 2px;
}

// 占位选择器 %
%d {
    width: 12px
}

.e {
    @extend %d;
    height: 13px
}

    编译后样式 Css

    .header, .content-header {
  background: blue; }

.footer, .content-header {
  font-size: 12px; }

.sidebar, .content-header {
  width: 12px; }

.content, .content-header {
  height: 13px; }

.content-header {
  color: red; }

.a, .b, .c {
  width: 12px; }

.b, .c {
  height: 13px; }

.c {
  border: 2px; }

.e {
  width: 12px; }

.e {
  height: 13px; }

    mixin

    sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
    混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

    无参数mixin

    //sass style
//-------------------------------
@mixin content {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include content;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

    有参数mixin

    @mixin cont($fz: 14px){
    font-size: $fz;
}
body {
    @include cont(12px) 
}

    多个参数mixin

    调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

    @mixin cont($color: red,$fz: 14px){
    color: $color;
    font-size: $fz;
}
body {
    @include cont($fz: 12px) 
}

    多组值参数mixin

    如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$shadow...

    @mixin box-shadow($shadow...){
    -moz-box-shadow: $shadow;
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}
.shadow{
    @include box-shadow(0px 2px 3px #ccc, 4px 5px 6px #f2f)
}

    @content

    可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

    @mixin style-for-iphone {
    @media only screen and (min-device-width: 320px) and (max-device-width: 568px){
        @content;
    }
}
@include style-for-iphone{
    font-size: 12px;
}
    sassscssoocsscss
    fmain
    215 声望6 粉丝

    越努力,越幸运

    « 上一篇
    [iview]-日期选择器:获取日期
    下一篇 »
    【vue-cli 3.0】 vue.config.js配置 - 路径别名

    引用和评论

    推荐阅读
    头像
    【vue-cli 3.0】 vue.config.js配置 - 路径别名

    fmain赞 31阅读 39.6k评论 13

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新