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. 赋予变量的值
  • 相关阅读:
    你试过不用if撸代码吗?
    Chrome开发者工具Debug入门
    我为什么推荐Prettier来统一代码风格
    使用JSDoc自动生成代码文档
    Async/Await是这样简化JavaScript代码的
    C#泛型约束 (转载)
    DateTime , DateTime2 ,DateTimeOffset 之间的小区别 (转载)
    允许跨域资源共享(CORS)携带 Cookie (转载)
    C#中如何利用操作符重载和转换操作符 (转载)
    EF Core 2.1 Raw SQL Queries (转自MSDN)
  • 原文地址:https://www.cnblogs.com/lhl66/p/7473365.html
Copyright © 2011-2022 走看看