「css」scss/sass学习笔记

安装和使用

安装

• 官方环境搭建指南：https://www.sass.hk/install/
• 总结
  1. 需要ruby环境
  2. 命令备忘

// 安装
gem install sass
gem install compass 
// 更新sass
gem update sass
// 查看sass版本
sass -v
// 查看compass版本
compass -v
//查看sass帮助
sass -h

使用

编译sass

sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

命令行编译;

//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

命令行编译配置选项;

命令行编译sass有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令sass -v查看详细。我们一般常用两种--style``--sourcemap。

//编译格式
sass --watch input.scss:output.css --style compact
//编译添加调试map
sass --watch input.scss:output.css --sourcemap
//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap
//开启debug信息
sass --watch input.scss:output.css --debug-info

• --style表示解析后的css是什么排版格式;
  sass内置有四种编译格式:nested``expanded``compact``compressed。
• --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

四种编译排版演示;

//未编译样式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

• nested 编译排版格式（很奇怪）

/*命令行内容*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

• expanded 编译排版格式（正常不压缩css）

/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

• compact 编译排版格式（行内元素感）

/*命令行内容*/
sass style.scss:style.css --style compact
/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

• compressed 编译排版格式（非常紧缩）

/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

语法内容

css变量

基础语法

• 声明
  • 以 $ 开头，例如$color;
  • 中划线和下划线都支持，但指向的会是一个变量，$a-b等同于$a_b
  • 赋值支持所有css支持的类型;

$color: #999;
/* 现在$color这个变量的值为#999了 */

• 使用

background: $color;

默认变量值(!default)

• 为了防止import进来的样式表覆盖别人已经命名好的变量，可以使用!default，这个标签的含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

局部变量转换全局变量(!global)

• 在变量的value后面追加!global，可以将块中的变量作用域转换为全局。

块状结构

选择器嵌套

/* 在子块中中为父元素添加属性，使用&代指父元素 */
.test {
    &:hover {
        color: $color;
    }
}

元素嵌套

/**
 * 元素子属性
 */
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
/* 解析成↓ */
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;
}

文件导入(@import)

与css的异同

• css的import
  • 只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
• sass的import
  • 在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求

局部文件

• 当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。
• 此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

嵌套导入

• 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中不存在）

.blue-theme {
    color: #000; // 这样的类java注释，是css原本不存在的，不会被解析
  background/* 或者使用css原本允许的注释，但是写在不允许的位置 */: #999;
}

混合器(@mixin)

语法

• 通过使用@mixin可以给一大段样式赋予一个名字，再通过@include导入，以实现大段样式的重用。

/* 声明一大段跨浏览器圆角的项目为rounded-corners */
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
// 使用
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

• 需要注意的是，大量使用@mixin会导致生成的样式表过大，导致加载缓慢。

给混合器(mixin)传参

// 声明
@mixin link-colors($normal, $hover) {
  color: $normal;
  &:hover { color: $hover; }
}
// 使用
// 1. 直接传值（类函数），顺序需根据声明的顺序
a {
  @include link-colors(blue, red);
}
// 2. 对象传值（类prop），顺序无所谓
a {
    @include link-colors(
      $hover: red,
      $normal: blue
  );
}

• 但是有一些也可以允许不传值，这个时候我们可以使用默认值。
  • 默认值的取值可以是任何有效的css属性值，也可以是其他的参数

@mixin link-colors(
    $normal,
    $hover: $normal, // 默认值为normal的传值
    $visited: #000 // 默认为#000,如果有传值会被重写
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(red);
}

选择器继承(@extend)

基础语法

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
// 上面这个部分转译出来就是
.error, .seriousError {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

和混合器@mixin的区别

• 混合器@mixin复制的是属性，所以本质上会造成大量重复属性的出现
• 继承@extend复制的是选择器，只是把一段属性应用到更多的选择器，代码量更少

媒体查询(@media)

与css中的区别

• 增加了可嵌套的功能

/* 编译前 */
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
/* 编译后 */
.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; 
  }
}