如何安装Sass

Posted 2023-03-27

由于sass是基于ruby环境下使用的，所以要先安装ruby , win 7系统直接进入下载你所需要的ruby版本。
下载完，安装程序。

运行cmd.exe命令

输入ruby -v,会显示安装的ruby 版本.

现在我们开始安装sass，在“开始”菜单中打开ruby的控制面板。

输入gem install sass ,按回车键执行命令。如果提示安装成功，这个步骤后面的内容可忽略。但大多数情况下，由于国内网络原因，导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的源，然后添加淘宝的源，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了。具体操作如下：
先移除默认的源，命令为gem sources --remove /，按回车，结果如下：

添加淘宝的源，命令为gem sources -a ,按回车，结果如下：

查看当前使用的源，命令为gem sources -1，按回车，结果如下：

执行gem install sass 命令，安装sass， 结果如下：

执行sass -v命令，就可以看到你安装的sass版本了，结果如下：

到这里，sass就已经安装好了。后话：
更新sass的命令语句为：gem update;
如果想要安装sass的某一特定版本，命令语句为： gem install sass --version=3.3.0;
如果想要删除sass的某一特定版本，命令语句为： gem uninstall sass --version=3.3.0;
查看ruby 安装的所有程序包，命令语句为： gem list; 参考技术A ruby安装

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby

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

sass安装

如果你喜欢偷懒，或者你公司网络限制比较多，请直接看最后一段

安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

然后直接在命令行中输入
gem install sass

按回车键确认，等待一段时间就会提示你sass安装成功。

如果要安装beta版本的，可以在命令行中输入
gem install sass --pre

你还可以从sass的Git repository来安装，git的命令行为
git clone git://github.com/nex3/sass.git cd sass rake install

如果上述的办法你尝试失败了，那说明要么被你的网络墙了这个，要么你的网络信号不好。你可以尝试本地安装，不过有点复杂。这里暴漏个惊天秘密，那就是koala这个编译工具已经内置了sass，所以如果你安装了koala，就根本不需要安装sass，注意ruby还是得安装。关于koala请参阅编译工具。

29sass

SASS

一.SASS的作用: 方便编写CSS.

二.SASS依赖的环境 : Ruby

三.如何安装SASS?

gem install sass
gem update sass   (更新sass)
gem uninstall sass (删除sass)

四.如何测试sass是否安装成功? sass -v

五.如何编译sass?

1.考拉
2.gulp

六.sass有哪四种输出方式?

七.如何导入外部scss? @import "文件名";

八.sass嵌套? 如何引入父类? &

1. 选择器嵌套
2. 属性嵌套
3. 伪类嵌套

九.注释? //sass注释 /css注释/

十.SASS变量? $变量名 : 值;

1.普通引用变量 : $变量名       (值)
2.特殊引用变量: #{$变量名}   (属性)

十一.数组? $变量名 : 值1 值2 值3 ……;

十二.map? $变量名 : (key : value,key : value,……);

1. length();
2. map-get();
3. map-keys();
4.map-values();
5.map-has-key();
6.map-merge();
7.map-remove();

十三.选择?

@if 条件{
    执行语句
}@else if 条件{
    执行语句
}@else{
    执行语句
}

十四.循环?

@for $i from 1 through 5{
    
}
@for $i from 1 to 5{
    
}
区别?

十五[email protected]

@each $i in 数组{
    
}

十六.宏@mixin

@mixin 宏名 {
    内容
}

@mixin 宏名($变量 : 默认值){
    内容
}
导入宏:  @include

十七.函数

@function 函数名([参数]){
    @return 内容;
}
引用函数: 函数名([参数]);

十八.继承

@extend 选择器;

require

一.html页面中:

<script src=‘js/require.js‘ defer async=‘true‘ data-main=‘js/main‘>

二.配置主模块

1.配置依赖文件的路径
require.config({
    "paths" : {
        模块别名 : "模块路径", //不加扩展名
        ……
    }
})
2.引入依赖文件
require([模块别名,……],function(模块的返回值,……){
    编写代码
})

三.设置子模块

define(function(){
    return {
        子模块的功能
    }
})

四.

AMD : 依赖前置 (reqire.js)
CMD : 按需加载 (sea.js)