Sass的安装方法，以及命令行的使用
安装Ruby
- 安装Ruby的时候，包括其他安装的软件，安装路径不要出现中文，包括我们使用的sass路径和文件名也不要出现中文
sass是基于ruby语言的，所以说在window上我们需要安装ruby
-
注意事项：在安装的过程中，需要把ruby添加到环境变量中
-
安装的时候需要把add Ruby executables to your PATH 这个选项选上
-
打开控制台
- 在开始菜单中的搜索中输入cmd
- 按键盘上的window(徽标) + R -》 输入cmd
- 在要打开控制台的文件夹下，按住Shift + 鼠标右键 选择 在此处打开命令窗口
-
在控制台中，输入ruby -v 查看当前电脑中的ruby的版本
- 如果没有安装ruby 会报 不是内部或外部命令
- 安装了 会显示版本信息
安装完ruby后需要替换gem源
- 在cmd中 输入下面的代码
- gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
- 使用 gem sources -l 去查看当前的gem的源 ，里面要求只有一个 并且是https://gems.ruby-china.com/
替换过后需要安装sass
- 在命令行中输入 gem install sass 安装sass
- 还去安装 gem install compass 安装compass
- 两者的关系就好像是javascript和jquery的关系
命令行基本命令
- 盘符: 切换盘 (例子：e:)
- dir 查看当前路径下的所有文件和文件夹
- cd 文件夹名 进入到某一个文件夹中
- tab 在输入名字的时候按tab会自动补全后面的内容
- 终止执行 Ctrl + C
- 要重复之前的命令 可以直接按 上
- 清屏 cls
sass的使用
- 不能直接使用sass ， 不被浏览器认可
sass 有两种后缀
- .sass -> 严格区分缩进
- .scss -> 之后使用这种，因为里面的写法和写css一样
使用sass需要去编译 要在当前要转换的路径中使用
map文件的作用：
- 将css和sass文件进行关联
- 在浏览器查看当前元素样式的时候，路径位置显示的是sass中的样式位置
编译命令:
- sass input output
- 单文件监听 sass --watch 文件:文件
- 文件夹监听 sass --watch 文件夹:文件夹
- 还可以选择使用软件进行编译 koala
例子：
-
嵌套 css代码可以进行嵌套
- css的嵌套
- 选择器{选择器{}}
- & 指代的是父选择器
- 例子：
- div{width: 200px;height: 200px;
- p {
- font: {
- size:20px;
- weight:bold;
- style:italic
- }
- color: red;
- &:hover{
- color: blue; }
- span{
- color: red;
- }
- font: {
- }
- &:hover{
- background-color: #000;
- }
- &:hover{
- }
- .box{
- width: 200px;
-
p{ - color: blue; - } - }
- css的嵌套
-
注释 注释并不会被全部的编译到css中，有些注释是会被忽略的
- // 不会被编译的到css文件中 ，只会存在在scss文件中
- /这种注释方式会出现在 nested expanded compact 风格中，不会出现在compressed中/
- /! 这种注释会出现在所有的风格中/
- 变量
- 声明变量：
- $变量名:值
- 变量的类型：
- 数字
- 字符串
- 颜色
- 布尔
- 空
- 数组 list
- maps
- 如果要在属性名中使用，需要用到插值操作 # {}
- 例子：
- .content{
- #{$str}:$color;
- background-#{$str}:$color
- }
- .content{
- 数组
- js
- var arr = [1,2,3,4,5,6]
- var arr1 =[[1,2],[3,4]]
- sass
- $list : 1 2 3 4 5 6
- $list1 : 1 2 , 3 4
- object
- $maps:(key:value,key:value)
- 例子：
- $maps:(key:value,key:value)
- width : get-map($map:$maps,$key:a)
- 例子：
- $maps:(key:value,key:value)
- 遍历数组
- 类名: asdjkh asq eywy asdg wlk uyiu ffjhg
- 例子:
- $list : asdjkh asq eywy asdg wlk uyiu ffjhg;
- @each $item in $list {
- .#{$item}{
- background:url(./#{$item}.jpg)
- }
- }
- 例子:
- 类名: asdjkh asq eywy asdg wlk uyiu ffjhg
- 运算 sass中的运算 + - * / % == !=
-
除法： 因为在css中存在字符 /
- 作为值或者值的一部分，作为变量
- 值被圆括号包裹
- 算数表达式的一部分
-
() 可以提升运算的顺序
-
颜色的运算 两位两位做加减
- 如果得到的结果超过16进制 或者 255, 会使用ff 或者 255
- 如果使用rgba的话 那么a的值必须相同
-
例子:
- div{
- color: #ff00cc + #00ffcc;//#ffffff
- color:rgb(0,0,0);
- background-color: #ffff00;
- }
- div{
- 流程控制