sass学习笔记1-3

作者：CleanTheString | 来源：互联网 | 2023-09-14 09:39

保持sass条理性和可读性的最基本的三个方法：嵌套、导入和注释安装sass和compassruby-v查看ruby版本gemsources—removehttps:rubyg

保持sass条理性和可读性的最基本的三个方法：嵌套、导入和注释

安装sass和compass

ruby -v查看ruby版本
gem sources —remove https://rubygems.org/删除原gem
gem sources -a https://ruby.taobao.org/ 添加国内淘宝源
gem sources -l 打印是否替换成功

gem install sass

gem install compass(安装sass和compass 可能要权限，sudo)

sass -v

compass -v查看安装后的版本

gem update sass 更新sass
sass -h 查看sass帮助

编译sass:
在命令行编译 Sass：

sass input.scss output.css

监视单个 Sass 文件，每次修改并保存时自动编译：

sass --watch input.scss:output.css

监视整个文件夹：

sass --watch app/sass:public/stylesheets

开发工具编译sass：
webstrom配置sass，自动编译：
preference－tools－file watchers(为sass，scss添加监听)
完了之后new file，stylesheet（再选择文件类型为scss），不要直接new scss会新建不出来，这是写的scss就自动编译为css了。

1、使用变量;

$ 用来标识变量

1-1变量声明

$nav-color:#F90;
nav {
 $width: 100px;
 width: $width;
 color: $nav-color;
}
div{
 color: $nav-color;
}

（$nav-color 是一个变量，在规则块的外部，所以在nav和div里面都可以使用，$width: 100px;在nav规则块的内部，就只能在nav块内使用）

//编译后

nav {
 width: 100px;
 color: #F90;
}
div{
 color: #F90;
}

2. 嵌套CSS 规则;

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

/* 编译后 */

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

这个过程中，sass用了两步，首先，把#content（父级）这个id放到article选择器（子级）和aside选择器（子级）的前边：然后，#content article里边还有嵌套的规则，sass重复一遍上边的步骤，把新的选择器添加到内嵌的选择器前边。

#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}

容器元素的样式规则会被单独抽离出来，而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。

#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

大多数情况下这种简单的嵌套都没问题，但是有些场景下不行，比如你想要在嵌套的选择器里边立刻应用一个类似于：hover的伪类。为了解决这种以及其他情况，sass提供了一个特殊结构&。

2-1. 父选择器的标识符&;

在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器可出现的地方，比如h1放在哪，它就可以放在哪。

article a {
  color: blue;
  &:hover { color: red }
}

编译后

article a { color: blue }
article a:hover { color: red }

同时父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。举例来说，当用户在使用IE浏览器时，你会通过Javascript在标签上添加一个ie的类名，为这种情况编写特殊的样式如下：

#content aside {
  color: red;
  body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

2-2. 群组选择器的嵌套;

群组选择器的规则会对命中群组中任何一个选择器的元素生效。

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

编译后

.container h1, .container h2, .container h3 { margin-bottom: .8em }

2-3. 子组合选择器和同层组合选择器：>、+和~;

article > section { border: 1px solid #ccc }
header + p { font-size: 1.1em }     //同层相邻组合选择器+选择header元素后紧跟的p元素：
article ~ article { border-top: 1px dashed #ccc }     //选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：

在sass中可以把它们放在外层选择器后边，或里层选择器前边：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

编译后

article ~ article { border-top: 1px dashed #ccc }
article > section { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

2-4. 嵌套属性;

nav {
 border: {
 style: solid;
 width: 1px;
 color: #ccc;
 }
}

嵌套属性的规则：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样：

nav {
 border-style: solid;
 border-width: 1px;
 border-color: #ccc;
}

对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则：

nav {
 border: 1px solid #ccc {
 left: 0px;
 right: 0px;
 }
}

这比下边这种同等样式的写法要好：

nav {
 border: 1px solid #ccc;
 border-left: 0px;
 border-right: 0px;
}

3. 导入SASS文件;

使用sass的@import来处理多个sass文件。
集中导入sass文件的方法，使你的样式可重用性更高，包括声明可自定义的变量值，以及在某一个选择器范围内导入sass文件。
如何在sass中使用css原生的@import命令。
有些sass文件用于导入，你并不希望为每个这样的文件单独地生成一个css文件。对此，sass用一个特殊的约定来解决。

css：@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
sass：sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，1、所有在被导入文件中定义的变量和混合器（参见2.5节）均可在导入文件中使用。2、使用sass的@import规则并不需要指明被导入文件的全名。可以省略.sass或.scss文件后缀。在不修改样式表的前提下，完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。
举例，@import”sidebar”;这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。

3-1 使用SASS部分文件;

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。
sass局部文件的文件名以下划线开头。

sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，只需在样式表中写@import “themes/night-sky”;。
局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。

3-2. 默认变量值;

一般情况下，反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。

$link-color: blue;
$link-color: red;
a {
color: $link-color;
}

在上边的例子中，超链接的color会被设置为red。这可能并不是你想要的结果，假如你写了一个可被他人通过@import导入的sass库文件，你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

3-3. 嵌套导入;

(允许只在某一个选择器的范围内导入sass局部文件。)
跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。举例说明，有一个名为_blue-theme.scss的局部文件，内容如下：

aside {
 background: blue;
 color: white;
}

然后把它导入到一个CSS规则内，如下所示：

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。
有时，可用css原生的@import机制，在浏览器中下载必需的css文件。sass也提供了几种方法来达成这种需求。