zoukankan      html  css  js  c++  java
  • Sass的的使用二

    1、嵌套输出方式 nested

    Sass 提供了一种嵌套显示 CSS 文件的方式。例如

    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      li { display: inline-block; }

      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
    在编译的时候带上参数“ --style nested”:

    sass --watch test.scss:test.css --style nested
    编译出来的 CSS 样式风格:

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;}

    nav li {
      display: inline-block;}

    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;}

    2、展开输出方式 expanded

    在编译的时候带上参数“ --style expanded”:

    sass --watch test.scss:test.css --style expanded
    这个输出的 CSS 样式风格和 nested 类似,只是大括号在另起一行,同样上面的代码,编译出来:

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li {
      display: inline-block;
    }
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }

    3、[Sass]紧凑输出方式 compact

    在编译的时候带上参数“ --style compact”:

    sass --watch test.scss:test.css --style compact
    该方式适合那些喜欢单行 CSS 样式格式的朋友,编译后的代码如下:

    nav ul { margin: 0; padding: 0; list-style: none; }
    nav li { display: inline-block; }
    nav a { display: block; padding: 6px 12px; text-decoration: none; }

    4、[Sass]压缩输出方式 compressed

    在编译的时候带上参数“ --style compressed”:

    sass --watch test.scss:test.css --style compressed
    压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格:

    nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

    Sass 调试:

    只要你的浏览器支持“sourcemap”功能即可。早一点的版本,需要在编译的时候添加“--sourcemap” 参数:

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

    sass --watch style.scss:style.css
    在命令终端,你将看到一个信息:

    >>> Change detected to: style.scss
    write style.css
    write style.css.map

    Sass 的变量包括三个部分:

    1. 声明变量的符号“$”
    2. 变量名称
    3. 赋予变量的值
  • 相关阅读:
    Github创建远程库
    注册和登录Github
    Github简介
    一个成都程序猿写于离开北京一周年与26岁生日的这一天。
    【原创】面试时遇到『看门狗』脖子上挂着『时间轮』,我就问你怕不怕?
    【编程玄学】一个困扰我122天的技术问题,我好像知道答案了。
    【原创】(求锤得锤的故事)Redis锁从面试连环炮聊到神仙打架。
    【原创】面试官:你回去等通知吧!
    【原创】面试官问我G1回收器怎么知道你是什么时候的垃圾?
    【原创】面试官:你说你熟悉jvm?那你讲一下并发的可达性分析
  • 原文地址:https://www.cnblogs.com/lhl66/p/7473365.html
Copyright © 2011-2022 走看看