Sass学习之路：注释、变量以及导入

前言

由于.sass不兼容CSS代码，所以以下内容完全使用.scss的语法。

Sass注释

Sass中除了提供CSS中的标准注释之外，还提供了一种静默注释：

/* 我是标准注释 */
// 我是静默注释

标准注释大多数情况下（一种例外：设置输出风格为compressed）是会生成到最终的CSS中的，而静默注释的话，只是Sass的注释，是不会被生成到CSS文件中的。

如果想，就算设置输出风格为compressed也要加入特定注释呢？那么可以采用重要注释写法，如下：

/*! 我的重要注释 */

也就是在标准注释的基础上，将注释的第一个字符设置为感叹号。

Sass变量

Sass作为一个CSS预处理器，那么最基本的编程语言特性变量自然也是必不可少的。Sass中变量系统相对比较丰富，包含局部变量，全局变量，默认变量，特殊变量（变量作用在属性上），多值变量。

Sass变量以$开头，用:分割变量名与变量值，以;结尾。如： $color: red;

Sass变量，不区分中横线和下划线，比如定义变量为$bg-color，那么使用$bg_color也能访问到哦！

局部变量

同大多数编程语言一样，变量的作用域是它本身的这个块，以及所有的子集。如:

body{
  $color: blue;
  color: $color;
  .container{
    background-color: $color;
  }
}

将被编译为：

body {
  color: blue;
}

body .container {
  background-color: blue;
}

同时，需要注意：针对以上代码，如果内部修改了$color的值，也会同时影响到外部的变量值。

全局变量

如果定义在局部的变量，与它同级的选择器中是无法使用的：

body{
  $color: blue;
  color: $color;
  .container{
    background-color: $color;
  }
}

// 会出现错误，未定义的变量
footer{
  color: $color;
}

这个时候，就需要提升$color为全局变量，在变量值之后，加上!global,示例如下：

body{
  $color: blue !global;
  color: $color;
  .container{
    background-color: $color;
  }
}

// 会出现错误，未定义的变量
footer{
  color: $color;
}

这个的话，就能够正常编译了，因为$color被提升为全局变量了。

默认变量

在Sass中，可以通过在变量值之后加入!default来让变量称为默认变量，如果有对该变量的赋值，不管前后，那么变量的默认值都会被替换掉，示例如下：

$color: red;
body{
  $color: blue !default;
  color: $color;
  .container{
    background-color: $color;
  }
}
footer{
  color: $color;
}

可以通过注释掉!default来查看生成的CSS的异同。

特殊变量

Sass的变量，还可以用在属性中，此时需要使用#{变量名}来引用，示例如下：

$containerId: c1;

##{$containerId}{
  color: red;
}

此时，生成的CSS为：

#c1 {
  color: red;
}

多值变量

强大的Sass，还提供了一种特殊的变量，即为多值变量，在一个变量中，可以定义多个值，然后通过制定的函数访问，示例如下：

// List类型的多值变量
$px: 5px 10px 15px 20px;

// Map类型的多值变量
$map: (id1: test, id2: testGrid, color: red);

body{
  // 此处需要注意，索引是从1开始，不是从0哦。
  margin-left: nth($px, 1);

  // 使用map-get访问，当心key的使用，指定了不存在的key会导致生成的css异常
  #{map-get($map, id2)}{
    color: red;
  }

  #id{
    color: map-get($map, color);
  }
}

生成的CSS如下：

body {
  margin-left: 5px;
}

body testGrid {
  color: red;
}

body #id {
  color: red;
}

导入

体现可维护性的重要指标就是文件似乎可以单一职责，那么在Sass中，主要体现在导入上。由于Sass中的导入指令和CSS的导入指令是同样的关键字，那么就需要按照一定的规则来判别了，满足以下任意一条规则的导入，使用CSS的原生导入：

  1. 被导入的文件名以.css结尾
  2. 被导入的文件是一个在线的url地址
  3. 以@import url(...)方式去导入文件

同时，编写局部的sass文件，建议使用下划线开头,如： a.scss，这样就不会生成多余的a.css了。

//_a.scss
#id2{
  color: red;
}

//1.scss
@import "a.scss";
#id1{
  color: blue;
}

body{
    @import "a.scss";
}

最终生成的结果为:

#id2 {
  color: red;
}

#id1 {
  color: blue;
}

body #id2 {
  color: red;
}

结尾

欲知后事如何，请听下回分解！

*:first-child {
margin-top: 0 !important;
}

body>*:last-child {
margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #000;
}

h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 14px;
}

h6 {
color: #777;
font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
color: #4183C4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
padding-left: 30px;
}

ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}

dl {
padding: 0;
}

dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}

dl dt:first-child {
padding: 0;
}

dl dt>:first-child {
margin-top: 0px;
}

dl dt>:last-child {
margin-bottom: 0px;
}

dl dd {
margin: 0 0 15px;
padding: 0 15px;
}

dl dd>:first-child {
margin-top: 0px;
}

dl dd>:last-child {
margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}

pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}

pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}

pre code, pre tt {
background-color: transparent;
border: none;
}

kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}

blockquote>:first-child {
margin-top: 0px;
}

blockquote>:last-child {
margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}

/* IMAGES
=============================================================================*/

img {
max-width: 100%
}
-->

时间： 2024-10-08 16:40:01

Sass学习之路：注释、变量以及导入的相关文章

Sass学习之路(5)——变量

1.定义变量:Sass中定义变量的关键字是'$'(毕竟程序员缺钱),并使用冒号(:)进行赋值,例如: $width:200px;//定义了一个名为width的变量,值为200px 2.普通变量和默认变量: 普通变量便是我们在大括号外用上面的方式声明的变量,可全局使用. 默认变量需要在声明的变量后加上  !default,如下: $lineHeight:1.5 !default; 默认变量可以理解为给变量一个初始值,在被使用到时,如果该变量没有值,则使用这个默认值.在默认变量前或后定义普通变量,都

Sass学习之路(2)——Sass环境安装（windows版）

因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳＿┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官网下载ruby(百度一下,你就知道). 当然了,国外的网站,动不动上不去,或者下载不了都有可能,所以百度软件中心这个也是可以的,亲测可用 点开以后选择普通下载,防止捆绑,从我做起. 下载完以后几乎是傻瓜式安装,使用默认路径就可以, 注意这里要勾上第二项,不然可能会出现找不到Ruby环境的情况.(就像

Sass学习之路(1)——Sass简介

Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等. 那么什么是CSS预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 换言之就是说,CSS预处理器是一种专门的变成语言,在通过这种语言编写之后,再将其编译成正常的CSS文件. CSS预处理器给CSS增加了编程的特性,例如可以使用变量.函数.以及逻辑. CSS预处理器的优势: 可以让你

Sass学习之路：Sass、Compass安装与命令行

导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,Sass则是其中的佼佼者. 什么是Sass Sass是最成熟.稳定.强大.专业的CSS扩展语言(官方解释).直白点,Sass就是一个非常好用的CSS预处理器,为css引入部分编程语言的特性. Sass在现阶段,有两种编码的语法,一个是兼容CSS语法的Scss格式文件,一个是Haml.Ruby类似语法的

Sass学习之路(3)——Sass编译

Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤,因为".sass"和".scss"文件并不能直接使用<link>标签引用,最终其实还是要将他们转换成CSS文件来在项目中使用. 所以要让web页面真正使用到Sass缩写的东西,编译这个过程是必须要有的. 这里会提到3种编译方法: 1.命令行编译 顾名思义,就是通过电脑里的终端(命令行工具)通过指令来编译Sass文件(个人觉得,这种方式比较直观,但是敲命令有点麻烦) (1)单文件编译: sas

Sass学习笔记

阅读目录 一. Sass安装 1.1 Ruby安装 1.2 运行gem命令 1.3 安装Sass 二. Sass基本用法 2.1 导入 2.2 注释 2.3 变量 2.4 嵌套 2.5 继承 2.6 占位符 2.7 混合宏 三. Sass编程 3.1 数学计算 3.2 条件 3.3 循环 3.4 函数 Sass被称为"CSS预处理器",就是用一种编程的思想去写CSS样式表.在还没接触Sass的时候,很多人都不愿意去了解,认为都会了CSS,为什么还要去写Sass,Sass最终生成的还是C

Python学习之路

Python学习之路 目录 Python学习之路[第一篇]:流程控制,用户交互,语法要求,变量,字符,注释,模块导入的使用 Python学习之路[第二篇]:文件,字符串,列表,元组,字典,集合的使用 更新中...

sass学习笔记1

less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个注意点,sass可以用sass后缀名,也可以用scss后缀名.前者比较恶心,像python一样没有花括号,也不让写分号,散架子一样.因此推荐用scss,这个也是目前我遇到的大部分人的选择. 关于中文编译出错的问题,需要指定字符集. @charset "utf-8";//必须设置了这个才能编

Python学习之路【第一篇】-Python简介和基础入门

1.Python简介 1.1 Python是什么 相信混迹IT界的很多朋友都知道,Python是近年来最火的一个热点,没有之一.从性质上来讲它和我们熟知的C.java.php等没有什么本质的区别,也是一种开发语言,而且已经进阶到主流的二十多种开发语言的top 5(数据源自最新的TIOBE排行榜). 来头不小啊!二十多种主流的开发语言,我该从哪一个开始呢?人生苦短,let‘s python! 1.2 Python的由来和发展趋势 Python的前世源自鼻祖“龟叔”.1989年,吉多·范罗苏姆(Gu