Sass的安装方法,以及命令行的使用
发布于 10 天前 作者 zjw1658414517 435 次浏览 来自 分享

安装Ruby

  • 安装Ruby的时候,包括其他安装的软件,安装路径不要出现中文,包括我们使用的sass路径和文件名也不要出现中文

sass是基于ruby语言的,所以说在window上我们需要安装ruby

  • 注意事项:在安装的过程中,需要把ruby添加到环境变量中

  • 安装的时候需要把add Ruby executables to your PATH 这个选项选上

  • 打开控制台

    1. 在开始菜单中的搜索中输入cmd
    2. 按键盘上的window(徽标) + R -》 输入cmd
    3. 在要打开控制台的文件夹下,按住Shift + 鼠标右键 选择 在此处打开命令窗口
  • 在控制台中,输入ruby -v 查看当前电脑中的ruby的版本

    • 如果没有安装ruby 会报 不是内部或外部命令
    • 安装了 会显示版本信息

安装完ruby后需要替换gem源

替换过后需要安装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中的样式位置

编译命令:

  1. sass input output
  2. 单文件监听 sass --watch 文件:文件
  3. 文件夹监听 sass --watch 文件夹:文件夹
  • 还可以选择使用软件进行编译 koala

例子:

  1. 嵌套 css代码可以进行嵌套

    • css的嵌套
      • 选择器{选择器{}}
      • & 指代的是父选择器
    • 例子:
      • div{width: 200px;height: 200px;
      • p {
        • font: {
          • size:20px;
          • weight:bold;
          • style:italic
        • }
        • color: red;
        • &:hover{
          • color: blue; }
        • span{
          • color: red;
        • }
      • }
        • &:hover{
          • background-color: #000;
        • }
      • }
      • .box{
        • width: 200px;
        • p{ - color: blue; - } - }

  2. 注释 注释并不会被全部的编译到css中,有些注释是会被忽略的

  • // 不会被编译的到css文件中 ,只会存在在scss文件中
  • /这种注释方式会出现在 nested expanded compact 风格中,不会出现在compressed中/
  • /! 这种注释会出现在所有的风格中/
  1. 变量
  • 声明变量:
    • $变量名:值
  • 变量的类型:
    • 数字
    • 字符串
    • 颜色
    • 布尔
    • 数组 list
    • maps
  • 如果要在属性名中使用,需要用到插值操作 # {}
  • 例子:
    • .content{
      • #{$str}:$color;
      • background-#{$str}:$color
    • }
  1. 数组
  • 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)
  • 遍历数组
    • 类名: asdjkh asq eywy asdg wlk uyiu ffjhg
      • 例子:
        • $list : asdjkh asq eywy asdg wlk uyiu ffjhg;
        • @each $item in $list {
          • .#{$item}{
          • background:url(./#{$item}.jpg)
          • }
        • }
  1. 运算 sass中的运算 + - * / % == !=
  • 除法: 因为在css中存在字符 /

    • 作为值或者值的一部分,作为变量
    • 值被圆括号包裹
    • 算数表达式的一部分
  • () 可以提升运算的顺序

  • 颜色的运算 两位两位做加减

    • 如果得到的结果超过16进制 或者 255, 会使用ff 或者 255
    • 如果使用rgba的话 那么a的值必须相同
  • 例子:

    • div{
      • color: #ff00cc + #00ffcc;//#ffffff
      • color:rgb(0,0,0);
      • background-color: #ffff00;
    • }
  1. 流程控制
  • @if (条件) {} @else {}

  • @for 包含两种形式

    • @for $var from start to end -> 小于end
    • @for $var from start through end -> 小于等于end
  • 例子:

    • 简单的栅格系统
      • @for $i from 1 through 12 {
        • .col-#{$i}{
          • width : 1 / 12 * $i * 100%
        • }
      • }
回到顶部