sass基础入门

最新推荐文章于 2024-01-24 09:37:28 发布

原创最新推荐文章于 2024-01-24 09:37:28 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Sass的基础知识，包括安装Sass和Compass，如何将Sass文件转换为CSS，以及scss的新语法。重点讲解了Sass的变量声明、选择器嵌套、文件导入、混合器、继承、if判断、for循环和each遍历等核心语法概念。

sass

安装
- sass是基于ruby语言开发的，所以使用sass之前需要安装ruby
- mac自带ruby不需要下载，window版本需要先安装ruby环境
  
  => gem install sass
  
  =>gem install compass
  
  =>compass 是一个 sass 的库，compass 里面有很多封装好的 mixin ，有了它，我们就可以很快的写出完美的，兼容的样式
- 单文件转化为css
  
  =>sass input.scss output.css
- 多文件监听,可以将多个css文件转化为css文件
  
  =>sass --watch 路径/sass:路径/css
- scss是sass3引入的新语法，是css3语法的超集，也就是所有有效的css3样式也同样适合sass
- scss就是sass的升级版

基础语法

变量声明

=> $变量名

选择器嵌套

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    p{
        color: red;
    }
    span {
        color: green;
    }
}

父选择器

=> & 就是代表父元素 &：hover就是给父元素增加了hover样式
```
div{
    &:hover{
        background-color: red;
    }
}
```

选择器的嵌套

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

导入文件

=> 可以将某个css文件导入到另一个css样式中，如果导入到标签中就作为该标签的后代样式
```
@import "a";
div{
  span {color: red}
  & {@import "a";}//将a中的css样式带入到div标签后代元素中
}
```
混合器

=>@mixin定义语句块，可以理解为一个可以函数，可以传递参数，参数也可以传递默认值

=>@include可以调用定义的语块

=>@return 可以当作函数中的返回值，后面接你想返回的内容
```
@mixin divRadius($r:100px){
  width: $r;
  height: $r;
  border-radius: $r/2;
}

div{
  @include divRadius;
  div{
    @include divRadius(50px)
  }
}
```

继承

=>可以使用@extend继承类的样式,继承后面写上需要继承的选择器

.div0
{
  $r:100px;
  width: $r;
  height: $r;
  border-radius: $r/2;
}

div{
  div{
    @extend .div0;
  }
}

if判断

=>@if( 条件 ) { } @else if( 条件 ) { }
for循环

=>@for $var from 1 through 5

=>@for $var from 1 to 5

=>这两个循环的区别就是to不包含5，through包含5
each遍历

=>@each $var in list