sass 订阅
Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后,Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。Sass是一个将脚本解析成CSS的脚本语言,即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”,与Haml类似[3],使用缩进来区分代码块,并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法通过.sass和.scss两个文件扩展名区分开。 展开全文
Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后,Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。Sass是一个将脚本解析成CSS的脚本语言,即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”,与Haml类似[3],使用缩进来区分代码块,并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法通过.sass和.scss两个文件扩展名区分开。
信息
软件名称
Sass
中文名称
审计准则说明书
软件特点
层叠样式表
设计者
Hampton Catlin
全    称
Statements on Auditing Standards
开发者
Natalie Weizenbaum
发布机构
美国注册会计师协会(AICPA)
SASs准则说明书
SASs,Statements on Auditing Standards ,审计准则说明书。在美国公众公司会计监督委员会(PCAOB)成立之后,公众公司的审计应当遵循PCAOB颁布的审计准则,ASB的规定只适用于非公众公司审计。注册会计师在执行非公众公司审计时,应当充分了解审计准则说明书以判断其是否适用于所执行的审计,并且确定偏离审计准则说明书的情况。截止2010年7月,审计准则委员会共发布120项审计准则说明书。
收起全文
精华内容
参与话题
问答
  • Sass

    2017-09-13 20:03:42
    一个CSS预编译框架 (给CSS的编写提供了编程的能力,增加了无限的可能性) 这个玩意儿是使用Ruby语言编写的,那么就需要先下载...接下来我们通过ruby 的 gem 命令进行远程安装sass 注:在我们安装完ruby后若不能使用g
    一个CSS预编译框架
    (给CSS的编写提供了编程的能力,增加了无限的可能性)
    学习地址:
    入门篇:http://www.imooc.com/learn/311
    进阶篇:http://www.imooc.com/learn/436
    这个玩意儿是使用Ruby语言编写的,那么就需要先下载Ruby环境 http://rubyinstaller.org/downloads

    安装完成后,打开ruby的命令行
    接下来我们通过ruby 的 gem 命令进行远程安装sass
    注:在我们安装完ruby后若不能使用gem 命令,可能的原因是安装期间未能正确添加环境变量
          此时可以手动添加:
    1、找到安装ruby的目录下的bin文件位置,如:D:\Ruby22-x64\bin
    2、将其添加至系统环境变量中,切记 用 分号 ; 结尾


    但是由于网络以及翻墙等限制,安装经常失败。  因此我们要更换一下网络源
    gem sources --remove https://rubygems.org/
    删除原有的,再添加新的源
    你可以通过命令
    gem sources -l
    先查看一下网络源,如果没有显示,则可以自己添加源
    gem sources -a http://gems.ruby-china.org/

    接下来使用 gem install sass 命令安装
    接下来我们在IDE中新建一个项目,然后在命令行进入这个目录


    新建一个index.scss文件,使用sass的语法进行样式的编写

    *{
        padding: 0; margin: 0;  
    }

    使用 sass index.scss index.css 命令,将源文件编译成真正的css文件

    这是生成了一个新的css文件,内容如下

    看起来似乎没什么区别,不用着急,我们先学会如何编译,再来使用它的强大语法。

    一些常见问题
    每次写完文件都要命令行编译一次?
    sass --watch index.scss:index.css
    监听某个文件,实时编译

    如果有很多文件,难道每个css都需要这样写?
    sass --watch D:\workspace\scss:D:\workspace\css
    监听某个文件夹,实时编译

    有没有更好的解决方案?
    Hbuilder中提供了一个插件,我们只需要将sass环境导入其中,就可以自动编译了。
    配置:
    --style=expanded --sourcemap=none --no-cache %FileName% %FileBaseName%.css
    其中主题可以查询这里 输出格式 (Output Style)


    如何编写sass文件?
    文件后缀名Sass 和 SCSS 有什么区别?
    Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
    文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名,
    语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似(推荐)。
    index.scss
    导入文件
    @import "mixin";
    注释
    //单行注释
    
    /* 
        多行注释
    */
    注: sass中不支持中文注释,怎么办?
    找到ruby的安装目录,里面也有sass模块,类似这样样的路径:
    C:\Ruby\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass
    在这里面有个文件叫engine.rb,添加一行代码
    Encoding.default_external = Encoding.find('utf-8')
    放在所有的require xxxxxx 之后即可。

    定义变量
    $fsv : 16px;
    .test-fontsize {
        font-size: $fsv;
    }
    
    变量的拼接
    $dir: left;
    $space: 10px;
    
    .test-var {
        margin-#{$dir} : $space;
        padding-#{$dir} : $space;
        border-#{$dir} : $space;
    }
    多值变量 -数组使用 nth(数组, index) 的方式来获取
    $val: 100px;
    $props: $val*0.6,$val*1.5, $w*2, $h*3;
    .test-array {
        width: nth($props,1);
        height: nth($props,2);
        left: nth($props,3);
        top: nth($props,4);
    }
    多值变量-映射使用 map-get( 映射, key) 的方式来获取 
    $list: (levela:(50px, 50px), levelb:(100px, 100px));  
    @each $key,$val in $list {  
        .#{$key} {  
            width: nth($val,1);  
            height: nth($val,2);  
        }  
    }  
      
    //编译后  
    .levela {  
        width: 50px;  height: 50px;  
    }  
    .levelb {  
        width: 100px; height: 100px;  
    }  
    $social-colors: (
        dribble: #ea4c89,
        facebook: #3b5998,
     );
    .btn-dribble{
      color: map-get($social-colors,facebook);
    }
    //编译后
    .btn-dribble {
      color: #3b5998;
    }
    嵌套
    #box {
        position: relative;
        .main {
            .items {
                span {
                    &.active {
                        color:red;
                    }
                }
                a {
                    &:hover {
                        color:blue;
                    }
                }
            }
        }
    }
    
    注:& 表示当前选择器

    mixin(混合)  使用 @include 方式加入
    @mixin testmixin{
        margin: 20px;
        background: black;
    }
    
    //虽然是代码混合,但可以向函数一样灵活传参
    @mixin opacity($val){
        opacity: $val;
        filter: alpha(opacity=$val*100);
    }
    
    //增加参数默认值
    @mixin border-radius($val:1px){
        -moz-border-radius: $val;
        -webkit-border-radius: $val;
        border-radius: $val;
    }
    注:引入方法  @include  border-radius(2px);

    继承 extend, 使用 @extend 方式继承样式
    %pos {
        position: absolute;
        left:0; top:0;
    }
    #box{
        @extend %pos;
    }
    循环  @for  和   @each
    $items: small,59px,36px,23px;
    .#{nth($items,1)} {
        @for $i from 2 through 4 {
            .type-#{$i - 1} {
                width: nth($items, $i); 
            }
        }
    }
    
    $planeData: ((small,50px,46px,1),(middle,70px,90px,2),(large,60px,40px,3));
    @each $size,$w,$h,$i in $planeData {
        .enemy-#{$size} {
            @extend %pos;
            width: $w;
            height: $h;
            background: url("imgs/plane#{$i}.png");
        }
    }
    

    常见的mixin函数
    /**
         * 常用mixin
     */
    
    //朝右三角形@include caret-right();
    @mixin caret-right($left:0, $top:0) {
        width: 0;
        height: 0;
        border-left: 4px solid #fff;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        position: absolute;
        left: $left;
        top: $top;
        transform: translate(-50%,-50%);
    }
    
    //朝下三角形 @include caret-down();
    @mixin caret-down($right:0, $top:0) {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #fff;
        position: absolute;
        right: $right;
        top: $top;
    }
    
    //垂直居中  @include vertical_md();
    @mixin vertical_md() {
        &:after {
            content: "";
            width: 0;
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
    }
    //css3兼容 @include css3();
    @mixin css3($property, $value){
        -webkit-#{$property} : $value;
        -moz-#{property} : $value;
        -ms-#{property} : $value;
    }
    //单行文本溢出使用  @include textOverFlow();
    @mixin textOverFlow($width:100px) {
        width: $width;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    //清除浮动:@include clearfix();  
    @mixin clearfix() {
        &:before,
        &:after {
            clear: both;
            content: '.';
            display: block;
            width: 0;
            height: 0;
            visibility: hidden;
        }
        
    }
    
    函数
    //-----------------------------------Black和White-----------------------------------------  
    //background:black(0.15);  
    //color:white(0.9);}  
    @function black($opacity) {  
        @return rgba(0, 0, 0, $opacity)  
    }  
      
    @function white($opacity) {  
        @return rgba(255, 255, 255, $opacity)  
    }  
    


    $bgc: #fff;
    $li-color: (1, 10%),(2, 12%),(3, 14%),(4, 16%),(5, 18%);
    ul {
        @each $index,
        $val in $li-color {
            li:nth-child(#{$index}) {
                background: darken($bgc, $val);
            }
        }
    }

    //darken(颜色,百分比) 举例: darken( #fff, 15%) 表示将 #fff颜色加深15% 
    //生成
    ul li:nth-child(1) {
        background: #e6e6e6;
    }
    
    ul li:nth-child(2) {
        background: #e0e0e0;
    }
    
    ul li:nth-child(3) {
        background: #dbdbdb;
    }
    
    ul li:nth-child(4) {
        background: #d6d6d6;
    }
    
    ul li:nth-child(5) {
        background: #d1d1d1;
    }
    
    //利用darken函数,将同一个颜色进行加深


     @import指令 
    导入指令,导入SASS或者SCSS文件。它直接需要导入文件名。所有这一切都是导入SASS文件将在一个CSS文件中结合。但是也有一些编译为CSS,当我们使用@import规则,有几件事情需要注意:
    • 文件扩展名为 .css
    • 文件名以 http:// 开始
    • 文件名是 url()
    • @import 构成任何媒体查询
    例如,创建一个SASS文件,用下面的代码:
    @import "style.css";
    @import "http://www.yiibai.com/bar.css";
    @import url(style);
    @import "style" screen;






    Sass 和 SCSS 有什么区别?
    Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
    文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名,
    语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似(推荐)。
    展开全文
  • sass的基本语法

    2020-05-12 19:09:02
    sass的基本语法 1,注释:**************************************** 单行注释 // 多行注释 /* */ 2,变量**************************************** $变量名称 : 变量的数值 便于后期的维护和修改 例如...

    一.定义

    sass的基本语法
    
        1,注释:****************************************
            单行注释  // 
            多行注释  /*   */ 
    
        2,变量****************************************
            $变量名称 : 变量的数值
    
            便于后期的维护和修改
    
            例如今天是5:12,要改变样式为黑白配色
            之前的css要改变所有的样式设定,现在只要改一个变量就可以了
    
    
        3,if判断语句****************************************
            (1) if语句
            多了 @符号,少了( )
    
            @if 变量 判断 数值 {样式}
    
            js的if语句
            if (变量 判断 数值){ 样式 }
    
            (2) if...else语句
            @if 变量 判断 数值 {样式1} @else {样式2}
    
            (3) if...else if...else
            @if 变量 判断 数值 {样式1} @else if 变量 判断 数值 {样式2} @else{样式}
    
        4,循环语法****************************************
            for循环
    
            (1),
            @for 变量 from 数值1 to 数值2 {代码}
                从数值1,开始循环,终止数值是数值2,但是不包括数值2
                例如 @for $int from 1 to 31,2循环,没有3
    
            (2),
            @for 变量 from 数值1 through 数值2 {代码}
                从数值1,开始循环,终止数值是数值2,但是包括数值2
                例如 @for $int from 1 through 31,2,3循环,包括3
    
                
            each循环
            循环数组的语法
            sass中定义数组: $变量:(1,数值1),(2,数值2),(3,数值3)....
                sass中定义数组 $变量:(索引,数值),(索引,数值),(索引,数值)
    
            each循环的语法形式
            每次循环数组单元,将索引存储在 $变量1中 将数值存储在 $变量2中
    
            @each $变量1 , $变量2 in $数组变量 { 程序 }
    
    
        5,嵌套语法****************************************
    
            (1),父子,后代嵌套关系
                父级css{
                    > 子级css   父子
    
                    子级css     后代
    
                    &:hover     伪类选择器
                }
    
        6,属性嵌套************************************************************
            例如 margin 有4个方向,先定义所有的4个方向,再单独嵌套定义另一个方向的属性样式
    
            div{
                margin:属性值 {
                    margin不同方向的属性值
                }
            }
    
    
        7,混合器---相当于sass的函数************************************************************
            定义一次,多次调用
    
            语法形式有3:
    
            (1),没有参数的函数/混合器
    
            定义: @mixin 混合器名称 {函数内容}
            调用: @include 混合器名称()
            
            (2),定义参数,以变量的形式,来定义参数
    
            定义: @mixin 混合器名称($参数){函数内容}
            调用: $include 混合器名称(实参数据)
    
            (3),有参数默认值的函数
    
            定义: @mixin 混合器名称($参数:默认值){函数内容}
            调用: $include 混合器名称(实参数据)
    

    二.定义

    变量
    在这里插入图片描述

    if判断

    在这里插入图片描述
    循环

    在这里插入图片描述
    结构嵌套

    在这里插入图片描述
    属性嵌套
    在这里插入图片描述
    混合器
    在这里插入图片描述

    展开全文
  • 什么是sass

    千次阅读 2018-12-26 14:50:18
    Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。 Sass 前世今生: ...
    Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。
    Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

    Sass 前世今生:

    Sass 是最早的 CSS 预处理语言,有比 LESS 更为强大的功能,不过其一开始的缩进式语法(Sass 老版本语法,后面课程会详细介绍 )并不能被大众接受,不过由于其强大的功能和 Ruby on Rails 的大力推动,还是有很多开发者选择了 Sass。

    Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。

    为什么早期不如 LESS 普及?

    虽然缩进式风格可以有效缩减代码量,强制规范编码风格,但它一方面并不为大多数程序接受,另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早,但远不如 LESS 普及的原因。

    展开全文
  • sass(应用及详解)

    2019-03-08 10:28:04
    1、安装sass 1.安装ruby 因为sass是用ruby语言写的,所以需要安装ruby环境 打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径 Add Ruby executables to your PATH 安装完成之后继续下一步操作 2.安装...

    1、安装sass

    1.安装ruby

    因为sass是用ruby语言写的,所以需要安装ruby环境
    打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径

    • Add Ruby executables to your PATH
      安装完成之后继续下一步操作

    2.安装sass

    在cmd里通过gem安装sass

    gem是ruby的包管理工具,类似于nodejs 的npm

    gem install sass
    

    这个时候如果不翻墙的话是会出问题的,因为:
    由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass了

    $ gem sources --remove https://rubygems.org/
    $ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org】
    $ gem sources -l
    *** CURRENT SOURCES ***
    https://ruby.taobao.org
    # 请确保只有 ruby.taobao.org
    $ gem install sass
    

    安装好之后执行sass -v就可以看到sass的版本了
    实在实在不行,就安装离线文件吧,但是失败率也很高
    gem install ./…/sass-3.4.22.gem

    2、编译sass文件的方式

    1.命令行编译

    可以通过cmd命令行执行sass方法来编译
    例如:

    sass scss/a.scss:css/a.css
    

    sass 后面写要编译的sass文件的路径,‘:’后面写的是
    要输出的目录及名字

    • 需要注意的是:必须有这个文件夹才能在里面生成css
      这样的话写一句执行一次编译一次有些太麻烦
      可以开启一个watch来监听文件变化来进行编译
    sass --watch scss:css
    

    –watch表示要监听 :前后的两个都是文件夹,表示scss文件夹的文件改变就编译到css文件夹

    2.其他方式编译

    除了命令行工具其实还可以用考拉、gulp等工具进行编译,但是ruby和sass是必须要安装的
    考拉的方式就不多做介绍了,大家i自己去看一下
    gulp的话呢是需要gulp-sass的模块来编译,使用方式类似于gulp-less
    这里是网址,点击查看

    3、sass四种风格

    sass编译的格式

    sass编译输出的css有四种格式

    • nested 嵌套
    • compact 紧凑
    • expanded 扩展
    • compressed 压缩

    这些样式会影响输出的css的格式
    简单介绍一下:
    css默认输出的嵌套

    ul{
           font-size:15px;
           li{
                  list-style:none;
           }
    }
    

    —》

    ul {
      font-size: 15px; }
      ul li {
        list-style: none; }
    

    紧凑compact
    在编译的时候需要执行

    sass --watch scss:css --style compact
    

    这个时候输出的代码就是

    ul { font-size: 15px; }
    ul li { list-style: none; padding: 5px; }
    

    compressed 压缩
    在编译的时候需要执行

    sass --watch scss:css --style compressed
    

    —>

    ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}
    

    expanded 扩展
    更像是平时写的css一样
    在编译的时候需要执行

    sass --watch scss:css --style expanded
    

    —>

    ul {
      font-size: 15px;
    }
    ul li {
      list-style: none;
      animation: all 0.3s;
    }
    

    compressed 压缩
    更像是平时写的css一样
    在编译的时候需要执行

    sass --watch scss:css --style compressed
    

    —>

    .a{width:100px;height:100px;border:1px solid red}.a .b{background:red}
    

    4、sass与scss

    sass的两个语法版本

    sass一开始用的是一种缩进式的语法格式
    采用这种格式文件的后缀名是.sass
    在sass3.0版本后我们常用的是sassy css语法,扩展名是.scss,更接近与css语法

    两个版本的区别

    • 后缀名不同 .sass和.scss
    • 语法不同,请看下面
      新版:
    /*新版本
    多行文本注释*/
    //新版本
    //单行文本注释
    @import "base";
    @mixin alert{
           color:red;
           background:blue;
    }
    .alert-warning{
           @include alert;
    }
    ul{
           font-size:15px;
           li{
                  list-style:none;
           }
    }
    

    老版本:

    /*新版本
    多行文本注释
    //新版本
      单行文本注释
    @import "base"
    =alert
           color:red
           background:blue
    .alert-warning
           +alert
    ul
           font-size:15px
           li
                  list-style:none
    

    5、变量、嵌套、混合、继承拓展

    变量的意义

    在sass里我们可以定义多个变量来存放颜色、边框等等的样式,这样就可以在下面想要使用样式的时候使用变量了
    这样的优点就是便于维护,更改方便

    变量的使用

    可以通过$来定义变量,在变量名字中可以使用-和_来作为连接,并且-和_是可以互通的,就是用起来一模一样。
    变量的值可以是字符串、数字、颜色等等,在变量里还可以使用其他变量,使用的时候直接写变量名就好了
    例如

    $primary-color:#ff6600;
    $primary-border:1px solid $primary_color;
    div.box{
           background:$primary-color;
    }
    h1.page-header{
           border:$primary-border;
    }
    

    —》

    div.box {
      background: #ff6600;
    }
    h1.page-header {
      border: 1px solid #ff6600;
    }
    

    嵌套的使用

    合理的使用嵌套语法,可以使我们编写代码更为快捷
    假设我们想写这样的css:

    .nav {
      height: 100px;
    }
    .nav ul {
      margin: 0;
    }
    .nav ul li {
      float: left;
      list-style: none;
      padding: 5px;
    }
    

    在sass里我们可以这样写

    .nav{
           height:100px;
           ul{
                  margin:0;
                  li {
                         float:left;
                         list-style:none;
                         padding:5px;
                  }
           }
    }
    

    大家会发现,写出来的代码父和子之间都有空格隔开,如果我们需要给a加上伪类的话我们这样写

    .nav{
        height:100px;
        a{
            color:#fff;
            :hover{
                color:#ff6600;
            }
        }
    }
    

    在里面就会出现这样的情况

    .nav a :hover {
      color: #ff6600;
    }
    

    我们发现在a和:hover之间有了空格,这样是不好的,所以我们需要在写的时候在:hover之前把a加上,这样就需要用到在之类里引用父类选择器的方式,我们可以用&符号代替父类
    例如:

    .nav{
        height:100px;
        a{
            color:#fff;
            &:hover{
                color:#ff6600;
            }
        }
    }
    

    这样就好了,下面来个完整的代码:

    .nav{
        height:100px;
        ul{
           margin:0;
           li{
                  float:left;
                  list-style:none;
                  padding:5px;
           }
           a{
                  display:block;
                  color:#000;
                  &:hover{
                         color:#f60;
                         background:red;
                  }
           }
        }
        & &-text{
           font-size:15px;
        }
    }
    

    -----》

    .nav {
      height: 100px;
    }
    .nav ul {
      margin: 0;
    }
    .nav ul li {
      float: left;
      list-style: none;
      padding: 5px;
    }
    .nav ul a {
      display: block;
      color: #000;
    }
    .nav ul a:hover {
      color: #f60;
      background: red;
    }
    .nav .nav-text {
      font-size: 15px;
    }
    

    嵌套属性

    我们可以把一些个复合属性的子属性来嵌套编写,加快编写速度,例如

    body{
           font:{
                  family:Helvitica;
                  size:15px;
                  weight:bold;
           }
    }
    .nav{
           border:1px solid red{
                  left:none;
                  right:none;
           }
    }
    .page-next{
           transition:{
                  property:all;
                  delay:2s;
           }
    }
    

    -----》

    body {
      font-family: Helvitica;
      font-size: 15px;
      font-weight: bold;
    }
    .nav {
      border: 1px solid red;
      border-left: none;
      border-right: none;
    }
    .page-next {
      transition-property: all;
      transition-delay: 2s;
    }
    

    mixin 混合

    你可以把它想象成一个有名字的定义好的样式
    每一个mixin都有自己的名字,类似于js里的函数定义方法如下

    @mixin 名字(参数1,参数2...){
        ...
    }
    

    使用方法是在其他选择器css样式里通过@include引入,其实就相当于将mixin里的代码写入到这个选择器的css里,如下:

    @mixin alert {
           color:#f60;
           background-color:#f60;
           a{
                  color:pink;
           }
           &-a{
                  color:red;
           }
    }
    .alert-warning{
           @include alert;
    }
    

    -----》

    .alert-warning {
      color: #f60;
      background-color: #f60;
    }
    .alert-warning a {
      color: pink;
    }
    .alert-warning-a {
      color: red;
    }
    

    刚才是没有参数的mixin,mixin也可以拥有参数,需要注意的是:

    • 形参的名字前要加$
    • 传参的时候只写值的话要按顺序传
    • 传参的时候不想按顺序的话需要加上形参名字
      例如:
    @mixin alert($color,$background) {
           color:$color;
           background-color:$background;
           a{
                  color:darken($color,10%);//把颜色加深百分之十
           }
    }
    .alert-warning{
           @include alert(red,blue);
    }
    .alert-info{
           @include alert($background:red,$color:blue);
    }
    

    ------》

    .alert-warning {
      color: red;
      background-color: blue;
    }
    .alert-warning a {
      color: #cc0000;
    }
    .alert-info {
      color: blue;
      background-color: red;
    }
    .alert-info a {
      color: #0000cc;
    }
    

    继承拓展 extend

    如果我们有一个选择器想要拥有另一个选择所有的东西,不管是样式还是子元素等等,可以使用@extend来继承
    大家需要注意的是,++b继承a的时候,a的子元素设置了样式,也会给b的子元素设置样式++,达到完全一样的情况,例如:

    .alert {
           padding:5px;
    }
    .alert a {
           font:{
                  weight:bold;
                  size:15px;
           }
    }
    .alert-info {
           @extend .alert;
           backgournd:skyblue;
    }
    

    ----》

    .alert, .alert-info {
      padding: 5px;
    }
    .alert a, .alert-info a {
      font-weight: bold;
      font-size: 15px;
    }
    .alert-info {
      backgournd: skyblue;
    }
    

    partials

    在以前咱们编写css的时候,一个css引入另一个css需要使用@import,其实这是不好的,会多发一次http请求,影响咱们站点的响应速度。
    在sass里,咱们可以把小的sass文件分出去,叫做partials,在某个sass里通过@import ‘partials名’去引入,注意路径哟,这样的话就可以把partials里的代码引到咱们大的sass里一起编译

    • 需要注意的是 partials的文件名前要加_
    _base.sass :
    body{
           margin:0;
           padding:0;
    }
    
    style.sass :
    @import "base";
    .alert {
           padding:5px;
    }
    .alert a {
           font:{
                  weight:bold;
                  size:15px;
           }
    }
    .alert-info {
           @extend .alert;
           backgournd:skyblue;
    }
    

    ----------->

    body {
      margin: 0;
      padding: 0;
    }
    .alert, .alert-info {
      padding: 5px;
    }
    .alert a, .alert-info a {
      font-weight: bold;
      font-size: 15px;
    }
    .alert-info {
      backgournd: skyblue;
    }
    

    这样的话我们就可以把模块化的思想引入到sass里了

    comment注释

    sass里的注释有三种

    • 多行注释
    • 单行注释
    • 强制注释
      多行注释:压缩后不会出现在css里 /* /
      单行注释: 不会出现在css里 //
      强制注释:压缩后也会出现在css里 /
      ! */

    6、数据类型与函数

    数据类型

    在sass里有数字、字符串、列表、颜色等类型
    在cmd里 输入

    sass -i
    

    就会进入到交互模式,输入的计算可以马上得到结果
    type-of()可以用来得到数据类型,如:

    type-of(5) -> number
    

    注意数字类型的可以包含单位,如:

    type-of(5px) -> number
    

    字符串类型:

    type-of(hello) -> string
    type-of('hello') -> string
    

    list类型:

    type-of(1px solid red) -> list
    type-of(5px 10px) -> list
    

    颜色:

    type-of(red)  -> color
    type-of(rgb(255,0,0)  -> color
    type-of(#333)  -> color
    

    number 计算

    2+9 -》10
    2*8 -》16
    (8/2) ->4 //除法要写括号
    

    也可以包含单位

    5px + 5px -> 10px
    5px -2 ->3px
    5px *2 ->10px
    5px * 2px ->10px*px //这样就不对了哟
    (10px/2px) -> 5//除法单位取消
    3+2*5px->13px
    

    好吧,都是一些小学的数学题,很简单对吧

    处理数字的函数

    绝对值

    abs(10) -> 10;
    abs(10px) -> 10px;
    abs(-10px) -> 10px;
    

    四舍五入相关

    round(3.4)->3  //四舍五入
    round(3.6)->4
    ceil(3.2)->4  //向上取整
    ceil(3.6)->4
    floor(3.2)->3  //向下取整
    floor(3.9)->3
    percentage(600px/1000px) ->65%  //百分之
    min(1,2,3) -> 1   //最小值
    max(2,3,4,5) -> 5  //最大值
    

    字符串相关

    //带引号和不带引号的字符串想加为带引号的字符串
    "a" + b ->"ab"
    a + "b" ->"ab"
    //字符串+数字
    "ab" + 1 ->"ab1"
    //字符串 - 和 / 字符串
    "a" - b ->"a-b"
    "a" / b ->"a/b"
    //注意字符串不能相乘
    

    字符串函数

    大写:

    $word:"hello";
    to-upper-case($word) -> "HELLO"
    

    小写:

    $word:"Hello";
    to-lower-case($word) -> "hello"
    

    得到length:

    $word:"Hello";
    str-length($word) -> 5
    

    得到字符串在字符串里的位置:

    $word:"Hello";
    str-index($word,"el") -> 2
    

    字符串中插入字符串:

    $word:"Hello";
    str-insert($word,"aa",2) -> "Haaello"
    

    颜色相关

    在sass里除了关键字、十六进制、rgb和rgba之外还有一种颜色是HSL
    分别表示的是 色相 0-360(deg) 饱和度 0-100% 明度 0-100%
    例如:

    body {
           background-color:hsl(0,100%,50%);
    }
    -》
    body {
      background-color: red;
    }
    
    body {
           background-color:hsl(60,100%,50%);
    }
    -》
    body {
      background-color: yellow;
    }
    

    也可以有透明哟

    body {
           background-color:hsl(60,100%,50%,0.5);
    }
    -》
    body {
      background-color: rgba(255,255,0,0.5);
    }
    

    颜色函数

    lighten函数和darken函数可以把颜色加深或减淡,即调整明度,第一个参数为颜色,第二个参数为百分比,例如:

    $color:#ff0000;
    $light-color:lighten($color,30%);
    $dark-color:darken($color,30%);
    .a{
           color:$color;
           background:$light-color;
           border-color:$dark-color;
    }
    

    —》

    .a {
      color: #ff0000;
      background: #ff9999;
      border-color: #660000;
    }
    

    saturate和desaturate函数可以调整颜色的纯度

    $color:hsl(0,50%,50%);
    $saturate-color:saturate($color,50%);
    $desaturate-color:desaturate($color,30%);
    .a{
           color:$color;
           background:$saturate-color;
           border-color:$desaturate-color;
    }
    

    –》

    .a {
      color: #bf4040;
      background: red;
      border-color: #996666;
    }
    

    用transparentize来让颜色更透明
    用opatify来让颜色更不透明

    $color:rgba(255,0,0,0.5);
    $opacify-color:opacify($color,0.3);
    $transparentize-color:transparentize($color,0.3);
    .a{
           color:$color;
           background:$opacify-color;
           border-color:$transparentize-color;
    }
    

    —》

    .a {
      color: rgba(255, 0, 0, 0.5);
      background: rgba(255, 0, 0, 0.8);
      border-color: rgba(255, 0, 0, 0.2);
    }
    

    列表类型

    在sass里,用空格或者逗号隔开的值就是列表类型
    如:

    1px solid red
    Courier,microsoft yahei
    

    列表函数

    sass里的列表类似与数组

    获取列表的长度
    length(5px 10x)  2
    获取列表中的第几个元素
    nth(5px 10px,2)  10px
    获取一个元素在一个列表里的下标
    index(1px solid red,solid) 2
    给列表里加入新的元素
    append(5px 10px,5px)  5px 10px 5px
    连接两个列表
    join(5px 10px,5px 0) 5px 10px 5px 0
    

    map类型

    sass里的map类型类似与js里的object

    $map:(key1:value1,key2:value2,key3:value3);
    

    map 函数

    //定义一个map
    $color:(light:#ffffff,dark:#000000);
    //获取map 的length
    length($color)    ->2
    //得到map里key对应的值
    map-get($color,dark)   ->#000000
    获取map里的所有键的列表
    map-keys($color)   ->("light","dark") //列表类型
    获取map里的所有值的列表
    map-values($color)  -> ("#ffffff","#000000") //列表类型
    判断map里是否含有这个key
    map-has-key($color,light)   ->true
    给map里添加键值对
    map-merge($color,(light-gray:#cccccc))
    ->(light:#ffffff,dark:#000000,light-gray:#cccccc)
    移除map里的某个键值对
    map-remove($colors,light)  ->(dark:#000000,light-gray:#cccccc)
    

    boolean类型

    在sass里通过> < 比较得到的值就是布尔值 true 和false

    5px>3px -> true
    5px<2px -> false
    

    在sass里也可以有或 且 非
    且:

    (5px > 3px) and (5px < 2px) -> false
    (5px > 3px) and (5px > 2px) -> true
    

    或:

    (5px > 3px) or (5px < 2px) -> true
    (5px < 3px) and (5px > 2px) -> false
    

    非:

    not(5px>3px) -> false
    

    interpolation

    在sass里可以通过interpolation的方式来在变量名和属性名上拼接变量值,例如

    $name:"info";
    $attr:"border";
    .alert-#{$name}{
           #{$attr}-color:red;
    }
    

    ---->

    .alert-info {
      border-color: red;
    }
    

    7、分支结构、循环结构、函数

    分支结构

    在sass里,可以使用@if让我们根据一些条件来应用特定的样式
    结构:

    @if 条件 {
       
    }
    

    如果条件为真的话,括号里的代码就会释放出来
    例如:

    $use-refixes:true;
    .rounded{
       @if $use-refixes {
           -webkit-border-radius:5px;
           -moz-border-radius:5px;
           -ms-border-radius:5px;
           -o-border-radius:5px;
       }
       border-radius:5px;
    }
    

    —>

    .rounded {
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
    }
    

    如果是另外一种情况

    $use-refixes:false;
    

    —》

    .rounded {
      border-radius: 5px;
    }
    

    if else在sass里的写法是:

    body{
           @if $theme == dark {
                  background:black;
           } @else if $theme == light {
                  background:white;
           } @else {
                  background:gray;
           }
    }
    

    for循环

    在sass里的for循环是这样的

    @for $var form <开始值> through <结束值> {
        ...
    }
    

    还有一种是

    @for $var form <开始值> to <结束值> {
        ...
    }
    

    注意,开始值和结束值的关系可以是升序也可以是倒序,但是每次只能+1或者-1
    这两种有什么区别呢?
    区别就是 from 1 to 4 的话是执行三次,i的变化是 1 2 3
    from 1 through 4 的话是执行四次,i的变化是 1 2 3 4
    如:
    from to

    $columns:4;
    @for $i from 1 to $columns{
           .col-#{$i}{
                  width:100% / $columns * $i;
           }
    }
    

    —》

    .col-1 {
      width: 25%;
    }
    .col-2 {
      width: 50%;
    }
    .col-3 {
      width: 75%;
    }
    

    from through

    $columns:4;
    @for $i from 1 through $columns{
           .col-#{$i}{
                  width:100% / $columns * $i;
           }
    }
    

    —>

    .col-1 {
      width: 25%;
    }
    .col-2 {
      width: 50%;
    }
    .col-3 {
      width: 75%;
    }
    .col-4 {
      width: 100%;
    }
    

    each 遍历list类型

    在sass里可以利用each方法来遍历咱们的list类型的数据
    list类型在js里类似于数组,那么each类似于for in遍历,结构如下:

    @each $item in $list{
        ...
    }
    

    例如:

    $colors:success error warning;
    $map:(success:green,warning:yellow,error:red);
    @each $color in $colors{
           .bg-#{$color}{
                  background:map-get($map,$color);
           }
    }
    

    —>

    .bg-success {
      background: green;
    }
    .bg-error {
      background: red;
    }
    .bg-warning {
      background: yellow;
    }
    

    @while 循环

    在sass里,拥有@while循环,比@for会更好用一些,@for循环只能从一个数到另一个数变化之间执行,每次变化都是1,while设置循环结构的话更为灵活;
    结构:

    @while 条件{
       
    }
    

    eq:

    $i:6;
    @while $i>0{
           .item-#{$i}{
                  width:$i*5px;
           }
           $i:$i - 2;
    }
    

    注意:$i - 2 需要用空格隔开哟
    ---------》

    .item-6 {
      width: 30px;
    }
    .item-4 {
      width: 20px;
    }
    .item-2 {
      width: 10px;
    }
    

    自定义函数

    在sass里也可以定义函数,并且也可以有返回值
    结构:

    @function 名称 (参数1,参数2){
        @return ...
    }
    

    例如,我们做一个返回map里key对应的值的函数:

    $colors:(light:#ffffff,dark:#000000,gray:#555555);
    @function color($key){
           @return map-get($colors,$key);
    }
    body{
           background:color(light);
           color:color(dark);
           border-color:color(gray);
    }
    

    —》

    body {
      background: #ffffff;
      color: #000000;
      border-color: #555555;
    }
    
    展开全文
  • CSS预处理器之SASS

    2018-07-05 10:22:29
    SASSSASS是一个成熟、稳定、强大的 CSS 扩展语言解析器,提供变量、嵌套、混合、继承等特性,大大节省了设计者的时间,使得CSS的开发变得简单和可维护。语法1.注释 :单行注释(//)和多行注释(/ /) 与js一样 ...
  • sass

    2020-11-16 22:32:10
    SASS SASS官网 世界上最成熟、最稳定、最强大的专业级CSS扩展语言! sass 是一个 css 的预编译工具 也就是能够 更优雅 的书写 css sass 写出来的东西 浏览器不认识 依旧是要转换成 css 在浏览器中运行 ...
  • sass学习

    2020-11-22 17:20:21
    安装 sass npm install -g sass 使用 //单文件转换命令 sass input.scss output.css //单文件监听命令 sass --watch input.scss:output.css //如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录: sass
  • SASS

    2015-11-05 20:31:00
    一、什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。 本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看...
  • sass安装

    千次阅读 2018-09-13 11:22:50
    第一步:安装sass之前首先要安装ruby ruby安装包 链接:https://pan.baidu.com/s/1fBvPBggF1MxkavTkXqd2Iw 密码:rznb 也可去官网进行下载安装,安装过程一路next即可。 勾选add ruby executables to PATH !!...
  • sass、scss

    2020-08-19 17:42:11
    sass安装环境 gem install sass gem install compass sass文件的使用 将sass转成css sass ./sass/a.sass ./css/a.css 将sass转成css文件 link href="./css/a.css" 改变sass自动更新对应的css sass --watch ./sass:./...
  • Iass、Pass、Sass三种云服务有什么区别: 1、第一层叫做IaaS : Infrastructure-as-a-Service(基础设施即服务) 2、第二层就是所谓的PaaS: Platform-as-a-Service(平台即服务)。 3、第三层也...
  • gulp-sass每次都会全量编译路径下所有*.scss 解决方案: 每次只将变动的文件进行编译,不再全量编译。 解决这个问题主要使用gulp-watch插件,github地址、npm地址 我比较喜欢使用gulp-debug查看当前管道输出,很...
  • 浅谈node环境下的Sass以及gulp工具下的Sass

    千次阅读 多人点赞 2020-03-25 20:27:00
    目录一、Sass简介二、Sass的解析器1. node环境下的Sass解析器2. gulp工具下的Sass解析器三、Sass语法1. 注释2. 变量3.嵌套4.导入@import5.混合器6.@if 判断7.循环8.继承 一、Sass简介 我们都知道虽然可以用CSS开发...
  • 在vue中使用sass的配置的方法

    万次阅读 多人点赞 2017-07-18 16:45:38
    1、创建一个基于 webpack 模板的新项目$ vue init webpack myvue2、...$ npm install3、安装sass的依赖包npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass4、在buil
  • react配置less或者sass

    万次阅读 2019-04-21 12:54:06
    react如何配置less(sass与less配置的方法基本一致,如果还是不会的朋友可以私信我) 接下来笔者会一步一步的跟朋友们一起去做配置 生成react项目, create-react-app <你的项目名> 可以将src目录中的文件删...
  • Sass学习笔记

    2016-03-23 21:48:21
     Sass 是一门高于 CSS 的元语言,基于Ruby创造出来的,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表...
  • Sass-开发规范

    千次阅读 2018-05-29 15:03:48
    参考:https://www.sasscss.com/sass-guidelines/ ...正确书写多行CSS规则; 有意义的使用空格。 2. 字符串: 遵循固定的编程规范处理 Sass 中的字符串 在 Sass 中字符串应该始终被单引号(')所包裹(在 querty ...
  • dart-sass 和 node-sass 的区别

    万次阅读 2019-10-12 16:39:28
    根据sass-lang官方网站的说法: Dart SassSass的主要实现,这意味着它在其他实现之前先获得了新功能。它快速,易于安装,并且可以编译为纯JavaScript,从而可以轻松集成到现代Web开发工作流中。 如果您在Dart-...
  • node-sass 安装失败的各种坑

    万次阅读 多人点赞 2018-06-07 09:48:57
    开始的时候引入别人的一个项目npm installnpm run dev 启动项目报错&gt; sell@1.0.0 dev E:\web_hwf\Vue\02app &gt; node build/dev-server.js ... ...webpack: wait until bundle finished: /index....
  • sass学习--sass的函数功能(进阶篇)

    万次阅读 2016-06-23 22:04:49
    罗列了sass繁杂的函数功能:字符串、数字函数、列表函数、Introspection函数(判断值)、Miscelloneous(三元条件函数)、Maps函数、颜色函数等七个大块!可谓是左宜右有啊!
  • 由于重新装了一个系统,很多环境配置要重新配置。在想run 一个项目时,出现下面的...Module build failed: Error: Cannot find module 'node-sass' at Function.Module._resolveFilename (internal/modules/cjs/...
  • node-sass安装失败简单解决方案

    万次阅读 2019-07-12 11:58:55
    安装node-sass遇到了如下错误 在这里插入代码片 找答案 花了3小时,试了网上无数种答案,没有可以解决的 解决方案 将sass-loader和node-sass的版本号提高到最新版,目前的最新版如下(2019年7月12日) “sass-...
  • 1. 简介 2. @import的缺点 3. 模块化的核心@use 3.1 @use的基本用法 3.2 @use与@import的区别 3.3 配置样式库的基础变量 4. 给库开发者使用的利器@...5. sass内置模块 6. 兼容性 7. 迁移指南 8. 参考资料 简介 ...
  • SASS用法

    2018-05-16 11:53:47
    一、什么是SASSSASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方...
  • 详说css与预处理器(以及less、sass、stylus的区别)

    万次阅读 多人点赞 2017-08-31 10:00:23
    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风格设计的。通过设立样式表,可以统一...
  • SASS基础教程

    千次阅读 2014-02-27 19:55:22
    SASS官方文档的基础上,加上了自己的解读和相关优秀资源推荐,欢迎大家拍砖!点保存点成了发表,请大家见谅!继续写作中。
  • Sass、LESS 和 Stylus区别总结

    万次阅读 多人点赞 2017-06-07 10:44:08
    本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。1.什么是 CSS 预处理器CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用...
  • sass的操作以及语法编程基础

    千次阅读 2019-01-19 22:11:07
    样式 CSS 的定义和其他的程序开发操作,就需要对 SASS 中提供的各种基础性的知识有一 个简单的认知和应用过程。 1-4.1.1 变量——Variables SASS 中的变量,必须是KaTeX parse error: Unexpected character: '...
  • less 和 sass

    2018-08-07 20:29:11
    一、LESS 1.条件判断 在less中我们可以通过条件判断实现渲染不同的样式,有点像switch,不是通过if实现的,而是when实现 在when方法中添加条件时,不需要单位 当判断相等时,使用=实现,没有==和=== ...
  • 直接下载node-sasssass-loader下载,然后拷贝到node-modules下即可,再次npm install就不会报错了

空空如也

1 2 3 4 5 ... 20
收藏数 100,897
精华内容 40,358
关键字:

sass