为了账号安全,请及时绑定邮箱和手机立即绑定
  • 选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法,Sass 的嵌套分为三种:

    • 选择器嵌套

    • 属性嵌套

    • 伪类嵌套


    查看全部
  • 只有满足所有下述标准时方可创建新变量:

    1. 该值至少重复出现了两次;

    2. 该值至少可能会被更新一次;

    3. 该值所有的表现都与变量有关(非巧合)。



    查看全部
  • !global 和 !default 对于定义变量都是很有帮助的。

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

    $baseLineHeight: 2;
    $baseLineHeight: 1.5 !default;
    body{
        line-height: $baseLineHeight; 
    }

    编译后的css代码:

    body{
        line-height:2;
    }


    可以看出现在编译后的 line-height 为 2,而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。


    查看全部
  • 来看一个简单的示例,假设你的按钮颜色可以给其声明几个变量:

    $brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color : #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;

    如果值后面加上!default则表示默认值。


    查看全部
    1 采集 收起 来源:[Sass]声明变量

    2018-12-22

  • 调试


    在 Sass3.3 版本之上(我测试使用的版本是 3.4.7),不需要添加这个参数也可以:

    sass --watch style.scss:style.css


    查看全部
    1 采集 收起 来源:Sass 的调试

    2018-12-22

  • 在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格:

    1. 嵌套输出方式 nested

    2. 展开输出方式 expanded  

    3. 紧凑输出方式 compact 

    4. 压缩输出方式 compressed


    查看全部
  • 另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。

    查看全部
  • 开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:

    sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css


    查看全部
    1 采集 收起 来源:[Sass]命令编译

    2018-12-22

  • 单文件编译:

    sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

    这是对一个单文件进行编译,如果想对整个项目所有 Sass 文件编译成 CSS 文件,可以这样操作:

    多文件编译:

    sass sass/:css/

    上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。


    查看全部
    1 采集 收起 来源:[Sass]命令编译

    2018-12-22

  • Sass 的编译有多种方法:

    • 命令编译

    • GUI工具编译

    • 自动化编译


    查看全部
    0 采集 收起 来源:Sass 编译

    2018-12-22

  • //Welcome to imooc learning Sass

    $red-color:red;


    .box{

        color:$red-color;

    }


    查看全部
    0 采集 收起 来源:Sass 语法格式

    2018-12-22

  • //welcome to imooc learn Sass

    $width:200px;

    $height:300px;


    body{

       width:$width;

       height:$height;

    }

    Sass是之前的版本?现在叫SCSS,所以它们是一样的东西

    查看全部
  • 如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可

    查看全部
    1 采集 收起 来源:[Sass运算]乘法

    2018-12-21

  • 使用 #{ }插值语句 (interpolation) 时,有引号字符串将被编译为无引号字符串,这样方便了在混合指令 (mixin) 中引用选择器名。

    查看全部
    0 采集 收起 来源:[Sass]字符串

    2018-12-21

举报

0/150
提交
取消
课程须知
对CSS有一定的了解,才可以更好的学习本课程。
老师告诉你能学到什么?
1、Sass是什么?他有什么功能? 2、Sass需要什么样的环境才能顺利运行 3、Sass语法格式和CSS有什么不一样? 4、Sass要如何编译 5、你要怎么调试Sass 6、Sass有哪些基本特性 7、Sass的控制命令能做些什么事情 8、Sass有哪些数据类型 9、Sass的函数功能

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!