码迷,mamicode.com
首页 > 其他好文 > 详细

sass学习笔记

时间:2017-01-19 12:31:36      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:scale   content   概览   表示   sla   values   dia   dex   rip   

零、概览

1、变量:$width
2、嵌套:增加结构性及可读性
3、混合mixin:copy的代码复用
4、扩展/继承:@extend  联合声明代码复用
5、流程控制:@if @each @for @while
6、常用数组操作
7、常用map操作
8、函数: sass function手册
9、导入:@import _reset.css
10、注释 :@charset "utf-8”; // 必须设置了这个才能编译有中文的注释
    
        @mixin以拷贝的形式存在,继承则是联合声明
        3.2.0版以后,建议传参的用@mixin,不传参使用继承
 

一、变量

    1、默认变量 !default
        $baseLineHeight: 2;//用来覆盖默认变量
        $baseLineHeight: 1.5 !default;
 
    2、特殊变量
        font:#{$baseFontSize}/#{$baseLineHeight};
 
    3、多值变量
        //一维数据
        $px: 5px 10px 20px 30px;
 
        //二维数据,相当于js中的二维数组
        $px: 5px 10px, 20px 30px;
        $px: (5px 10px) (20px 30px);
 
    4、map //key value对,且value可以是数组
        (h1: 2em, h2: 1.5em, h3: 1.2em)
  

二、嵌套

    1、选择器嵌套 //使用&表示父元素选择器
        技术分享
    2、属性嵌套 //指的是有些属性拥有同一个开始单词
        如:border-left,border-right
            技术分享

    3、跳出嵌套 //@at-root sass3.30中新增功能 
        跳出嵌套扩展 //@at-root (without: key)和@at-root (with: key)
        关键词key:all(所有),rule(常规css),media(media),support(support)
   

三、混合(mixin)

    // @mixin定义 @include调用
 
   1、 无参数:@mixin center-block  
        调用:@include center-block;
 
    2.1、有参数,支持默认参数:@mixin opacity($opacity:50) 
        调用:@include opacity; 
                  or @include opacity(80); 
 
    2.2、参数为多组值:加...
        @mixin box-shadow($shadow…)
        @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3));
 
  3、@content //sass3.2.0新增 接受整块代码块 解决media及keyframe前缀的需求
 

四、继承 //@extend 选择器继承另一个的样式,并联合声明

    1、占位符% //sass3.20以后可用 当不调用时,不被编译,减少冗余
 

五、流程控制详情

    @if,@else, @for,@each和@while
 
    a、@if ... @else …
       or  三目判断:if($condition, $if_true, $if_false)
 
    b、@for
        // 相当于JS的 for(var $i = 1; $i <= 4; $i++){}
        @for $i from 1 through 4
 
    c、@each //遍历数组与对象
        @each $e in $list //遍历数组
        @each $key, $val in (h1: 2em, h2: 1.5em, h3: 1.2em) //遍历对象
        // 多字段数组        
        $animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
        @each $animal, $color, $cursor in $animal-data
 
    d、@while  //与js while相似    
 

、部分数组的操作详情

 
    a、join // 合并两个数组
 
        join($a, $b, joinSymble) -> joinSymble:space,comma
 
    b、index($array, $value) -> index or null //值在数组中的位置
 
    c、length($list) -> length or 0 //数组长度
 
    d、list_separator($list) ->space,comma //取得数组的分隔符
 
    e、nth($array, index) -> $value //取值
 

七、map操作详情

    
    // 取得对象的某一属性的值
    a、map-get 
        map-get(("foo": 1, "bar": 2), "foo") => 1
 
    // 删掉某一键值对
    b、map-remove($map, $key) 
        map-remove(("foo": 1, "bar": 2), "bar") => ("foo": 1)
 
     // 取得它的所有属性名,以数组形式返回
    c、map-keys($map
        map-keys(("foo": 1, "bar": 2)) => "foo", “bar”
        
    // 取得它的所有属性值,以数组形式返回
    e、map-values($map)
        map-values(("foo": 1, "bar": 2)) => 1, 2
 
     // 判定它是否拥有某一个属性
    f、map-has-key($map, $key)
        map-has-key(("foo": 1, "bar": 2), "foo") => true
    
    // 合并两个对象
    g、map-merge($map1, $map2)
        map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2)
 

八、函数

    0、自定义函数    //定义@function 调用@include
    @function strip-units($number){
        @return $number / ($number * 0 + 1);
    } 

    1、颜色函数:详情
    a、rgb颜色函数
        rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色;
        rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色;
        red($color):从一个颜色中获取其中红色值;
        green($color):从一个颜色中获取其中绿色值;
        blue($color):从一个颜色中获取其中蓝色值;
        mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。
 
    b、HSL颜色函数: 控制颜色明暗
        hsl($hue,$saturation,$lightness):通过色相、饱和度和亮度的值创建一个颜色;
        hsla($hue,$saturation,$lightness,$alpha):通过色相、饱和度、亮度和透明)的值创建一个颜色;
        hue($color):从一个颜色中获取色相值;
        saturation($color):从一个颜色中获取饱和度值;
        lightness($color):从一个颜色中获取亮度值;
        adjust-hue($color,$degrees):通过改变一个颜色的色相值,创建一个新的颜色;
        lighten($color,$amount):通过改变颜色的亮度值,让颜色变亮,创建一个新的颜色;
        darken($color,$amount):通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色;
        saturate($color,$amount):通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色;
        desaturate($color,$amount):通过改变颜色的饱和度值,让颜色更少的饱和,从而创建出一个新的颜色;
        grayscale($color):将一个颜色变成灰色,相当于desaturate($color,100%);
        complement($color):返回一个补充色,相当于adjust-hue($color,180deg);
        invert($color):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。
 
    c、Opacity函数
        alpha($color) /opacity($color):获取颜色透明度值;
        rgba($color, $alpha):改变颜色的透明度值;
        opacify($color, $amount) / fade-in($color, $amount):使颜色更不透明;
        transparentize($color, $amount) / fade-out($color, $amount):使颜色更加透明。
 
    2、字符串函数
        unquote($string):删除字符串两端的引号;
        quote($string):给字符串两端添加引号。//字符串中间有单引号或者空格时,需用引号括起来
        str-length($string):返回长度
        str-insert($string, $insert, $index):插入字符串
        str-index($string, $substring):返回找到的第一个串
 
    3、数字函数
        percentage($value):将一个不带单位的数转换成百分比值;
        round($value):将数值四舍五入,转换成一个最接近的整数;
        ceil($value):将大于自己的小数转换成下一位整数;
        floor($value):将一个数去除他的小数部分;
        abs($value):返回一个数的绝对值;
        min($numbers…):找出几个数值之间的最小值;
        max($numbers…):找出几个数值之间的最大值。
 
    4、数组函数
        length($list):返回一个列表的长度值;
        nth($list, $n):返回一个列表中指定的某个标签值
        join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
        append($list1, $val, [$separator]):将某个值放在列表的最后;
        zip($lists…):将几个列表结合成一个多维的列表;
        index($list, $value):返回一个值在列表中的位置值。
        set-nth($list, $n, $value):替换第n个值
 
        
    5、Introspection函数 //对值做判断
        type-of($value):返回一个值的类型
        unit($number):返回一个值的单位;
        unitless($number):判断一个值是否不带有单位
        comparable($number-1, $number-2):判断两个值是否可以做加、减和合并
 
    6、选择器函数
        selector-nest($selectors…) //嵌套
        selector-nest(".foo", ".bar", ".baz") => .foo .bar .baz
        selector-append($selectors…) //追加
        selector-append(".foo", ".bar", ".baz") => .foo.bar.baz
        selector-extend(".a .b", ".b", ".foo .bar") => .a .b, .a .foo .bar, .foo .a .bar
        selector-replace($selector, $original, $replacement) //替换
        selector-replace(".foo .bar", ".bar", ".baz") => ".foo .baz"
        selector-unify($selector1, $selector2) //合并
        selector-unify(".a .b", ".x .y") => .a .x .b.y, .x .a .b.y
        is-superselector($super, $sub) //是否为
        is-superselector(".bar", ".foo .bar”) => true

sass学习笔记

标签:scale   content   概览   表示   sla   values   dia   dex   rip   

原文地址:http://www.cnblogs.com/hity-tt/p/6305933.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!