sass学习笔记

5/24/2017 1:23:15 PM

安装

因为sass需要ruby环境的支持，所以我首先安装ruby环境。

rubyInstaller下载安装

地址：https://rubyinstaller.org/downloads/。

安装时勾选上加入path 路径

ruby的sources更换

因为国外的网速太慢，更换为淘宝镜像。淘宝ruby镜像地址为：https://ruby.taobao.org/,因为他是安全的https协议，所以显得取得授权，详见：http://blog.csdn.net/zcwforali/article/details/72677266

然后再删除原来的sources

gem sources –remove https://rubygems.org/

最后换上淘宝镜像

gem sources -a https://ruby.taobao.org/

使用以下命令查看是否更换成功

gem sources -l

安装sass

gem install sass

安装特定版本的sass(在执行该命令时，如果没有安装devkit请参考：http://blog.csdn.net/zcwforali/article/details/72677982)

gem install sass –version=3.3

sass版本

sass -v

更新ruby程序

更新所有的ruby程序

gem update

查看ruby安装的程序

gem list

删除某个ruby程序

1.删除某个版本

gem uninstall sass –version=3.3.0

2.删除所有

gem uninstall sass

sass小试牛刀

1.新建一个main.scss的文件，然后在里面写点简单的css

2.dos进入到该目录下，执行”sass main.scss main.css”

最后该目录下就会生成相应的main.css文件，还会额外生成

• .sass-cache文件夹，这个有助于提高sass编译速度，缓存的作用
• main.css.map文件，这是.scss文件和.css文件的对应关系。

compass安装

gem install compass

创建compass项目

compass create projectname

sass和scss的相互转化

1.将.scss转化为.sass

sass-convert main.scss main.sass

2.将.sass转化为.scss

sass-convert main.sass main.scss

---

变量

$height: 200px;

import指令，引入文件

在目录下新建一个.scss文件，该文件在此处专用于存储变量，所以不需要生成相对应的.css文件。

将其命名为”_variables.scss”，则该文件为局部文件，不会产生相应的css文件。

@import “variables”;

引入多个文件时在文件名间加入逗号

@import “variables”, “mixin”;

注释

1. //，不会输出到编译后的css文件中
2. /* */

嵌套规则

.main-sec {
    height: 100px;
    .headline {
        font-family: $headline-ff;
    }
}

&代表上级选择器

a {
    color: green;
    &:hover {
        color: red;
    }
}

属性嵌套

.headline {
      font: {
        family: $headline-ff;
        size: 17px;
      }
}

变量操作

比较，加，减，乘，除

mixin的使用

1.声明

@mixin col-6 {
    width: 50%;
}

2.使用

.webdemo-sec {
    @include col-6();
}

3.参数的使用

@mixin col($width) {
    width: $width;
    float: left;
}

4.默认参数
@mixin col(width:50width:$width:50%) { width:$width;
float: left;
}

@extend标签的使用

.error {
    color:red;
}
.serious-error {
    @extend .error;
    border: 1px #f00;
}

.serious-error继承了.error，所以他将会有color为红色的属性

只让继承的样式

例如.error只是提供让别人继承，而不被使用

%error {
    color:red;
}
.serious-error {
    @extend %error;
}

媒体查询

//媒体查询
@mixin col-sm($width:90%) {
    //当屏幕宽度大于768px时，width为$width
    @media (min-width: 768px) {
        width: $width;
        float: left;
    }
    //当屏幕宽度小于768px时，width为默认的100%
}

使用

@include col-sm();

at-root修饰

通过at-root修饰，可以将嵌套在样式内部的样式，最终编译成css文件时不是嵌套的，因为浏览器在解析嵌套时非常低效。

.main-sec {
    @at-root{
        .headline {
            font-family: $headline-ff;
        }
        .detail {
            font-size: 17px;
        }
    }
}

这个在书写时是嵌套书写的，但是编译成css文件时，却是.headline和.detail，不然就是.main-sec .headline和.main-sec .detail

参数校验

@mixin col-md($width: 100%){
    @if type-of($width) != number {
        @error "$width必须是一个数值型的数，您输入的是#{$width}";
    }
    @if not unitless($width) {
        @if unit($width) != "%" {
            @error "$width应该是一个百分制，您输入的是#{$width}";
        }
    }@else {
        @warn "$width应该是一个百分制，您输入的是#{$width}";
        $width: (percentage($width) / 100);
    }

    @media (min-width: 1118px) {
        width: $width;
        float: left;
    }
}

问题

• 在@include中.me.wen是什么意思，为什么是这样的结果
• 在参数校验中，为什么在@media外面声明”width:$width”就报错了