为了账号安全,请及时绑定邮箱和手机立即绑定
  • @for应用在网格系统生成各个格子 class 的代码:

    //SCSS 
    $grid-prefix: span !default;
    $grid-width: 60px !default;
    $grid-gutter: 20px !default;
    
    %grid {
      float: left;
      margin-left: $grid-gutter / 2;
      margin-right: $grid-gutter / 2;
    }
    @for $i from 1 through 12 {
      .#{$grid-prefix}#{$i}{
        width: $grid-width * $i + $grid-gutter * ($i - 1);
        @extend %grid;
      }  
    }

    编译出来的 CSS:

    .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
      float: left;
      margin-left: 10px;
      margin-right: 10px;
    }
    
    .span1 {
      width: 60px;
    }
    
    .span2 {
      width: 140px;
    }
    
    .span3 {
      width: 220px;
    }
    
    .span4 {
      width: 300px;
    }
    
    .span5 {
      width: 380px;
    }
    
    .span6 {
      width: 460px;
    }
    
    .span7 {
      width: 540px;
    }
    
    .span8 {
      width: 620px;
    }
    
    .span9 {
      width: 700px;
    }
    
    .span10 {
      width: 780px;
    }
    
    .span11 {
      width: 860px;
    }
    
    .span12 {
      width: 940px;
    }

    将上面的示例稍做修改,将 @for through 方式换成 @for to::

    //SCSS
    @for $i from 1 to 13 {
      .#{$grid-prefix}#{$i}{
        width: $grid-width * $i + $grid-gutter * ($i - 1);
        @extend %grid;
      }  
    }

    其最终编译出来的 CSS 代码和上例所编译出来的一模一样。

    这两段 Sass 代码并无太多差别,只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12,其遍历出来的终点值也是 12,和 <end> 值一样。配合 to 的 <end> 值是 13,其遍历出来的终点值是 12,就是 <end> 对就的值减去 1 。


    查看代码快照
  • 在SASS的@for循环中有两种方式:

    @for $i from <start>  through  <end>

    @for $i from <start>   to  <end>

    $i表示变量

    start表示起始值

    end表示结束值

    这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数

  • 你编译出来的 CSS 代码中,不会有新代码添加,但在命令终端可以看到提示信息:

    WARNING: No color found for faceboo in $social-colors map. Property ommitted.
             on line 25 of test.scss

    是不是非常的友好。但总觉得这样写是傻傻的,总不可能每获取一个 key 都写一个 @if 语句吧。其实不用这么复杂,我们可以自定义一个函数,比如 colors():

    @function colors($color){
        @if not map-has-key($social-colors,$color){
            @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
        }
        @return map-get($social-colors,$color);
    }

    有了这个函数之后,我们就可以这样使用

    .btn-dribble {
        color: colors(dribble);
    }
    .btn-facebook {
        color: colors(facebook);
    }
    .btn-github {
        color: colors(github);
    }
    .btn-google {
        color: colors(google);
    }
    .btn-twitter {
        color: colors(twitter);
    }
    .btn-weibo {
        color: colors(weibo);
    }


    查看代码快照
  • 换皮肤的项目,可能每一套皮肤对应的颜色蛮多的,那么使用此功能来管理颜色的变量就非常的有条理性,便于维护与管理。你可以这样使用:

    $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
        )
    );


    查看代码快照
  • 多层嵌套取值

    $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

        )

    );

    .test1 {

        color:map-get(map-get($theme-color,default),text-color);

    }


  • If a @media directive appears within a CSS rule, it will be bubbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule.

  • unit() 函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘、除运算:

  • 升级后不会报错了?

  • 数字函数-random()函数

    括号内不带参数

  • 同时 quote() 碰到特殊符号,比如: !、?、> 等,除中折号 - 和 下划线_ 都需要使用双引号括起,否则编译器在进行编译的时候同样会报错:

  • 使用 quote() 函数只能给字符串增加双引号,而且字符串中间有单引号或者空格时,需要用单引号或双引号括起,否则编译的时候将会报错。

    .test1 {
        content:  quote(Hello Sass);
    }


  • 如果字符串,自身带有引号会统一换成双引号 ""。

  • unquote( ) 函数只能删除字符串最前和最后的引号(双引号或单引号),而无法删除字符串中间的引号。如果字符没有带引号,返回的将是字符串本身。

  • the characters of sass:

    1. define variables;

    2. @extend 

    3. %placeholder

    4. mixins

    what is the functions of sass?

    1. string function

    2. number function 

    3. list funtion 

    4. color function 

    5. introspection function

    6. ternary function

  • @each 循环就是去遍历一个列表,然后从列表中取出对应的值。

    @each 循环指令的形式:

    @each $var in <list>

    .author-bio{

    @include author-images;

    }    //sass

    .author-bio .photo-adam{

    }


  • 在 Sass 的 @for 循环中有两种方式:

    @for $i from <start> through <end>
    @for $i from <start> to <end>
    • $i 表示变量

    • start 表示起始值

    • end 表示结束值

    这两个的区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。


  • @debug :如果你在命令行中使用命令生成css文件,命令行中就会打印debug的信息

    @if  {

    }else {

    }

  • @import color.css 自动编译成css

    @import "color,css" 则不把它编译成css

首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
对CSS有一定的了解,以及最好是学习完成《sass基础篇》课程,才可以更好的学习本课程。
老师告诉你能学到什么?
1、Sass 的控制命令 2、Sass 的函数功能 3、Sass 的函数的 @ 规则
意见反馈 邀请有奖 帮助中心 APP下载
官方微信