SASS相关

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/53309416

安装ruby和sass

安装ruby:http://rubyinstaller.org/downloads 安装sass:gem install sass 或者安装compass(含sass): gem install compass

取版本:sass -v 更新:gem update sass

卸载:gem uninstall sass

编译

命令:

// 冒号前面是scss路径,后面需要生成的css路径
sass ---wath style\scss\:style\css\--style compressed 

支持中文注释:lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass\engine.rb 在末尾加: Encoding.default_external = Encoding.find(‘utf-8’)

输出风格命令

  • 嵌套输出:–style nested, 最后的大括号不折行
  • 展开输出:–style expanded, 最后的大括号折行
  • 紧凑输出:–style compact, 单行
  • 压缩输出:–style compressed,最大压缩

API

变量的声明和调用

    $color: #333;
    $btn-bg: #ccc;
    $btn-bg: #e5e5e5 !default; //多用于组件化开发,重新定义变量即覆盖

    .btn { border: 1px solid $color; background: $btn-bg; }

    变量作用域类似js (选择器、函数、混合宏...的内部定义的变量为全局变量))

嵌套

  • 选择器嵌套’&‘
nav {
  ul {
    header & {
      color: blue;
    }
  }
  li {
    &:hover {
      font-size: 100px;
    }
    &::before ,
    &::after {
      content: '';
      display: table;
    }
    &::after{
      clear: both;
      overflow: hidden;
    }
    a {
      display: block;
    }
    &.open a {
      display: inline-block;
    }
  }
}

‘&’可以前面或者后面 + 选择器

  • 复合属性的嵌套:
    border: {
        top: {
            color: #ccc;
            width: 1px;
        }
   }

属性嵌套以 ’ : ‘拼接

混合宏

分别有不带参数,带参数和复杂的混合宏:

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
@mixin border-radius($radius:5px){ //可设置默认值
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
@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);
  }
}

继承(@extend)和占位符(%)

a.btn { height: 30px; }
.btn-big { @extend .btn; color: #ccc; }

//编译后生成
a.btn, a.btn-big { height: 30px; }
.btn-big { color: #ccc; }
div%h { height: 30px; }
.btn { @extend %h; }
.btn-big { @extend %h; color: #ccc; }

//编译后生成
div.btn, div.btn-big { height: 30px; }
.btn-big { color: #ccc; }

插值#{} 注释 数据类型

  • 插值#{}
$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}
  • 注释 注释‘/../’编译会在CSS文件中显示,‘//’不会显示
  • 数据类型 跟javascript字符类型一样, SassScript 支持 CSS 的两种字符串类型:
    1. 有引号字符串 (quoted strings),如 “Lucida Grande” 、’http://sass-lang.com‘;
    2. 无引号字符串 (unquoted strings),如 sans-serifbold。
    3. 值列表:margin: 10px 15px 0 0或者: font-face: Helvetica, Arial, sans-serif,可以是空格或者逗号

运算符

‘+ -’:相同单位才能运算; ‘*’:只需为一个值提供单位; ‘/’:与乘法差不多,只有以下这些情况才会被当作除法运算符

1. 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
2. 如果数值被圆括号包围。
3. 如果数值是另一个数学表达式的一部分。

Function相关

if else:
    @if 条件 {} @else if 条件 {} @else {}
    判断符:!=  ==  >  <  >=  <=
    逻辑:or  and
for/while:
    @for $i from 1 through 3 {} //1~3
    @for $i from 1 to 3 {} //1~2

    $i: 4;
    @while $i > 0 { $i: $i - 1; }

each:
    $list: a b c;
    @each $item in $list {}
length($list)    //num --- 取列表长度
index($list, $item)    //num|false --- 取元素索引
nth($list, n)    //el --- 按索引取元素,n大于length时报错

join($list1, $list2, auto|space|comma)    //$newList --- 将两个列表合成一个列表
join( (1 2), (3,4) )    //1 2 3 4
join( (1,2), (3 4) )    //1,2,3,4
join(1, (2 3) )    //1 2 3
join(1, (2,3) )    //1,2,3
join(1,2)    //1 2

append($list, $add, auto|space|comma) //$newList--- 将一个元素添加到列表
zip(1px 2px 3px, solid dashed dotted, #333 #666 #999) //--- 转成多维列表

type-of(el)    //number|string|bool|color --- 返回数据类型
unit(number)    //--- 取数值的单位, 乘除可获得两个单位
unitless(number)    //true|false--- 是否不带单位
comparable(number1, number2)    //true|false --- 是否可运算
if($condition, $if-true, $if-false)    //三元运算
  • map
$theme-color: (
        default:(
                bgcolor: #fff,
                text-color: #444,
                link-color:#39f
        ),
        primary:(
                bgcolor:#000,
                text-color:#fff,
                link-color: #93f,
        ),
        negative:(
                bgcolor: #f36,
                text-color:#fefefe,
                link-color: #d4e
        )
);
map-get($map, key)    //--- 取出,没有则返回null
map-has-key($map, key)    //true|false --- 判断$map中是否有指定key值
map-keys($map)    //--- 返回keys列表(逗号分隔)
map-values($map)    //--- 返回values列表(逗号分隔)
map-merge($map1, $map2)    //$newMap ---
map-remove($map, key)    //删除指定key返回新map(不能删除map中的map)
keywords($args)    //--- 根据宏的参数动态创建map(自动去除参数中的$符号)

颜色函数

  • RGB
rgba(#f00, 0.6)    //--- 将颜色转成rgba
red(#f00)    //255 --- 取出R
green(#f00)    //0 --- 取出G
blue(#f00)    //0 --- 取出B
mix($color-1, $color-2, 50%)    //颜色混合
  • HSL
adjust-hue(-deg|-%)    //调整色相
saturate(#ccc, 30%)    //增加饱和度
desaturate(#f00, 80%)    //降低饱和度
lighten(#000, 30%)    //提高明度
darken(#fff, 30%)    //降低明度
grayscale(#f00)    //转成无彩系,等同于desaturate(#f00, 100%)
  • opacity
alpha($color) | opacity($color)    //--- 取出A
fade-in($color, .2) | opacify($color, .2)    //--- 与原值进行加法运算
fade-out($color, .2) | transparentize($color, .2)    //--- 与原值进行减法运算

@规则

  • 引入scss或sass
@import "include/foo.scss|include/foo", "...", "...";
@import "include/";

不想被编译只想被导入,此时的命名方式:_foo.scss

  • @media
//冒泡
        .sidebar {
            @media screen {
                width: 300px;
            }
            @media screen and (orientation: landscape) {
                width: 500px;
            }
        }

//嵌套

        @media screen {
            .sidebar {
                width: 300px;
                @media (orientation: landscape) {
                    width: 500px;
                }
            }
        }
//使用插值
        @media #{$media} and ($feature: $value) { }
  • @extend
//继承的位置点
.header a.btn:hover i.red { }
span { @extend i.red; }    //.header a.btn:hover span

.header a.btn:hover %child { }
span { @extend %child; }    //.header a.btn:hover span
  • @at-root //— 跳出所有嵌套
    .a {
        height: 20px;
        @at-root .d {
            height: 30px;
        }
    }
  • @debug 、 @warn 、 @error

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏landv

Golang 新手可能会踩的 50 个坑【转】

译文:https://github.com/wuYin/blog/blob/master/50-shades-of-golang-traps-gotchas-m...

3312
来自专栏前端杂货铺

前端开发中的字符编码

前端开发过程中会接触各种各样的编码,比较常见的主要是UTF-8和HTML实体编码,但是web前端的世界却不止这两种编码,而且编码的选择也会造成一定的问题,如前后...

3508
来自专栏阮一峰的网络日志

async 函数的含义和用法

本文是《深入掌握 ECMAScript 6 异步编程》系列文章的最后一篇。 Generator函数的含义与用法 Thunk函数的含义与用法 co函数库的含义...

2826
来自专栏王磊的博客

vuejs深入浅出—基础篇

一、从HelloWorld说起 任何语言的都是从Hello World开始的,VueJs也不例外,直接上代码: <script src="https://unp...

3276
来自专栏LIN_ZONE

javascript对象序列化(对象与JSON字符串的互换)

前一段时间用到h5的本地存储---需要把某个js对象存储在浏览器的本地存储中,用到了javascript对象的序列化与反序列化

832
来自专栏极客猴

内容提取神器 beautiful Soup 的用法

上篇文章只是简单讲述正则表达式如何读懂以及 re 常见的函数的用法。我们可能读懂别人的正则表达式,但是要自己写起正则表达式的话,可能会陷入如何写的困境。正则表达...

1013
来自专栏Python爬虫实战

Python数据类型之字符串

字符串就是一系列的字符。Python中,用配对的引号括起来的都是字符串,其中引号可以是单引号也可以是双引号:

882
来自专栏小灰灰

SPI框架实现之旅二:整体设计

SPI框架实现之旅二:整体设计 上一篇简单的说了一下spi相关的东西, 接下来我们准备开动,本篇博文主要集中在一些术语,使用规范的约定和使用方式 设计思路 下...

3538
来自专栏技术之路

golang 常见疑惑总结

1363
来自专栏Golang语言社区

Go 语言简介(上)— 语法

Hello World package main //声明本文件的package名 import "fmt" //import语言的fmt库——用于输出 f...

4048

扫码关注云+社区

领取腾讯云代金券