发表于: 2018-09-10 09:11:57

1 748


编辑日报内容...

今天完成的事情:

1.学习sass 

sass语法格式

这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本,其文件名以“.sass”为扩展名。
来看一个 Sass 语法格式的简单示例。假设我们有一段这样的 CSS 代码:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

现在用 Sass 的语法格式来编写:

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

在整个 Sass 代码中,我们没看到类似 CSS 中的大括号和分号。
注:这种语法格式对于前端人员都不太容易接受,而且容易出错。

二、SCSS语法格式

SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里,并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

同样的这段 CSS 代码:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

我们使用 SCSS 语法格式将按下面这样来书写:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}


这样的语法格式对于从事前端工作的同学来说更易于接受,这也是 SCSS 为什么更被前端人员青眯的原因。

不管是 Sass 的语法格式还是 SCSS 的语法格式,他们的功能都是一样的,不同的是其书写格式文件扩展名不同,来看一个简单的对比图:


正因为如此,有不少同学使用 Sass 新的语法规则,而文件扩展名依旧使用的是“.sass”,这也就造成血案了,编译时说编译不出来。在此特别提醒新同学:“.sass”只能使用 Sass 老语法规则(缩进规则),“.scss”使用的是 Sass 的新语法规则,也就是 SCSS 语法规则(类似 CSS 语法格式)。

2.sass编译

这样一来,也就有了这章需要介绍的内容—— Sass 的编译。因为 Sass 开发之后,要让 Web 页面能调用 Sass 写好的东西,就得有这么一个过程,这个过程就称之为 Sass 编译过程。Sass 的编译有多种方法:

  • 命令编译
  • GUI工具编译
  • 自动化编译

3.

[Sass]不同样式风格的输出方法

众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格:

  1. 嵌套输出方式 nested
  2. 展开输出方式 expanded  
  3. 紧凑输出方式 compact 
  4. 压缩输出方式 compressed

3.1

[Sass]嵌套输出方式 nested

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; }

如下图所示:


3.2

[Sass]展开输出方式 expanded

2、嵌套输出方式 expanded

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

在编译的时候带上参数“ --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.3

[Sass]紧凑输出方式 compact

2、嵌套输出方式 compact

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

在编译的时候带上参数“ --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; }

 

3.4

[Sass]压缩输出方式 compressed

2、压缩输出方式 compressed

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

在编译的时候带上参数“ --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}

明天计划的事情:

1.继续sass学习

2.继续js学习

遇到的问题:暂无

收获:学习了sass转换css



返回列表 返回列表
评论

    分享到