sass笔记

sass

sass的安装： sass依赖于ruby环境，因此装sass以前先确认装了ruby。安装完ruby以后，在开始菜单中，找到刚才咱们安装的ruby，打开Start Command Prompt with Ruby，直接在命令行输入gem install sass,按回车键确认等待安装完成

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，否则之后使用编译软件的时候会提示找不到ruby环境

sass

sass的安装： sass依赖于ruby环境，因此装sass以前先确认装了ruby。安装完ruby以后，在开始菜单中，找到刚才咱们安装的ruby，打开Start Command Prompt with Ruby，直接在命令行输入gem install sass,按回车键确认等待安装完成

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，否则之后使用编译软件的时候会提示找不到ruby环境

ruby安装步骤：

Window 系统下，咱们可使用 RubyInstaller 来安装 Ruby 环境，下载地址为：请点击这里下载。

下载 rubyinstaller 以后，解压到新建立的目录下：

双击 rubyinstaller-2.2.3.exe 文件，启动 Ruby 安装向导。

点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，直到 Ruby 安装程序完成 Ruby 安装为止。

安装完成以后，能够用ruby -v代码检测是否安装成功

sass安装：  ruby环境中 打开comand promt with ruby，在命令行直接输入gem install sass,按回车确认，便可安装

sass转译css文件：设置监听，直接打包等方法，直接打包以下：在webstorm里使用compess init,在setting中勾选language&framework中compass中勾选，在不自动编译的状况下用watch -time进行编译

 

 

1、sass语法

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另外一种是scss文件，scss跟css文件格式差很少，使用大括号和分号。

2、导入：编译时会将@import的scss文件合并进来只生成一个css文件，若是导入的是css文件，则不会被整合合并。

3、注释：两种方式，/*   */,和双斜杠//,      其中双斜杠方式不被转译

4、变量

变量的书写：必须是以$开头，其后紧跟变量名，变量名和变量值以冒号隔开， 后面加上!default则表示默认值。

一、普通变量：定义以后能够全局调用

二、默认变量：通常用来设置默认值，而后覆盖，默认变量前面前面申明新的变量定义肯定覆盖范围

三、特殊变量：通常定义的变量都为属性值，可直接使用，可是若是变量做为属性或在某些特殊状况下等则必需要以#{$variables}形式使用。

四、多值变量：list和map两种，listl类型有点像js中的数组，map类型有点像js类型中的对象

      1》list数据可经过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值

            eg:

     $linkColor:blue,green  !default;

         //下面第一个值是默认值，第二个是鼠标滑过值        a{            color:nth($linkColor,1);            &:hover{            color:nth($linkColor,2);              }            }  

   2》map数据以key和value成对出现，其中value又能够是list。格式为：。$map: (key1: value1, key2: value2, key3: value3);

五、全局变量：在变量值后面加上即为全局变量!global

5、嵌套

一、选择器嵌套：指的是在一个选择器中嵌套另外一个选择器来实现继承，从而加强了sass文件的结构性和可读性，用&表示父元素选择器。

二、属性嵌套：属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

@at-root:用来跳出选择器嵌套的。默认全部的嵌套，继承全部上级选择器，但有了这个就能够跳出全部上级选择器。

@at-root(without:...)和at-root(with:...)

默认只会跳出选择器嵌套，而不能跳出或，若是要跳出这两种，则需使用，。这个语法的关键词有四个：（表示全部），（表示常规css），（表示media），@at-root@media@support@at-root (without: media)@at-root (without: support)allrulemedia

（表示support，由于目前还没法普遍使用，因此在此不表）。咱们默认的其实就是。support@support@at-root@at-root (without:rule)

                                                                emmet/zen-coding

emmet和zen-coding是提升代码编写的两个插件

学会安装插件，主要熟悉一些快捷键的使用，运用emmet插件提升开发速度

sass转译css文件;设置监听法和直接打包法

 

1、sass语法

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另外一种是scss文件，scss跟css文件格式差很少，使用大括号和分号。

2、导入：编译时会将@import的scss文件合并进来只生成一个css文件，若是导入的是css文件，则不会被整合合并。

3、注释：两种方式，/*   */,和双斜杠//,      其中双斜杠方式不被转译

4、变量

变量的书写：必须是以$开头，其后紧跟变量名，变量名和变量值以冒号隔开， 后面加上!default则表示默认值。

一、普通变量：定义以后能够全局调用

二、默认变量：通常用来设置默认值，而后覆盖，默认变量前面前面申明新的变量定义肯定覆盖范围

三、特殊变量：通常定义的变量都为属性值，可直接使用，可是若是变量做为属性或在某些特殊状况下等则必需要以#{$variables}形式使用。

四、多值变量：list和map两种，listl类型有点像js中的数组，map类型有点像js类型中的对象

      1》list数据可经过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值

            eg:

     $linkColor:blue,green  !default;

         //下面第一个值是默认值，第二个是鼠标滑过值        a{            color:nth($linkColor,1);            &:hover{            color:nth($linkColor,2);              }            }  

   2》map数据以key和value成对出现，其中value又能够是list。格式为：。$map: (key1: value1, key2: value2, key3: value3);

五、全局变量：在变量值后面加上即为全局变量!global

5、嵌套

一、选择器嵌套：指的是在一个选择器中嵌套另外一个选择器来实现继承，从而加强了sass文件的结构性和可读性，用&表示父元素选择器。

二、属性嵌套：属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

@at-root:用来跳出选择器嵌套的。默认全部的嵌套，继承全部上级选择器，但有了这个就能够跳出全部上级选择器。

@at-root(without:...)和at-root(with:...)

默认只会跳出选择器嵌套，而不能跳出或，若是要跳出这两种，则需使用，。这个语法的关键词有四个：（表示全部），（表示常规css），（表示media），@at-root@media@support@at-root (without: media)@at-root (without: support)allrulemedia

（表示support，由于目前还没法普遍使用，因此在此不表）。咱们默认的其实就是。support@support@at-root@at-root (without:rule)