前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >sass的基础用法

sass的基础用法

作者头像
小明爱学习
发布2020-07-23 10:15:16
4740
发布2020-07-23 10:15:16
举报
文章被收录于专栏:smh的技术文章

前端发展到现在都有了不小的改变,今天主要谈一下css扩展语法sass的基本用法和语法。

sass是什么?

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 、嵌套 、混合 、导入  等高级功能,这些拓展令 CSS 的开发更加便捷。

我们此篇不讲安装和编译,我们只说语法。

1.变量声明

sass使用$符号来声明变量:

代码语言:javascript
复制
$color:red

调用:

代码语言:javascript
复制
color:$color

2.嵌套语法

我们知道html是有层级的,但是css却不支持层级,sass完美解决了这个问题。

代码语言:javascript
复制
.main{
    font-size: 24px;
    a,span{
        font-size:14px ;
    }
}

输出:

代码语言:javascript
复制
.main {
  font-size: 24px;
}

.main a, .main span {
  font-size: 14px;
}

3.父元素&

在Sass中,&表示父元素。

代码语言:javascript
复制
.wx{
    transition: all 1s;
    &:hover{
        transform: scale(1.5);
    }
}

输出为:

代码语言:javascript
复制
.wx {
  transition: all 1s;
}

.wx:hover {
  transform: scale(1.5);
}

4.控制语句@if

代码语言:javascript
复制
$common:".index";
#{$common} section{
    background-color: #ccc;
    width: 100%;
    height: 100px+50px;
    @if 3==3{
        height:350px ;
    }
}

输出为:

代码语言:javascript
复制
.index section {
  background-color: #ccc;
  width: 100%;
  height: 150px;
  height: 350px;
}

5.循环语句from...through..

代码语言:javascript
复制
@for $i from 1 through 3{
    .test-#{$i}{height: 10px*$i; background-color: gray;}
}

输出为:

代码语言:javascript
复制
.test-1 {
  height: 10px;
  background-color: gray;
}

.test-2 {
  height: 20px;
  background-color: gray;
}

.test-3 {
  height: 30px;
  background-color: gray;
}

6.循环语句@each

代码语言:javascript
复制
@each $var in blue,red,green {
    .#{$var}{
        color: $var;
    }
}

 输出为:

代码语言:javascript
复制
.blue {
  color: blue;
}

.red {
  color: red;
}

.green {
  color: green;
}

7.代码重用Mixin

代码语言:javascript
复制
@mixin clearleft($size,$color2) {
    &{
        font-size: $size;
        color:$color2;
        clear:both;
    }
}
.mixin{@include clearleft(22px,red);}

输出为:

代码语言:javascript
复制
.mixin {
  font-size: 22px;
  color: red;
  clear: both;
}

以上就是sass重用的7个知识点,其实还有其他知识点,只是不常用,所以我就不一 一列举了。

如无作者授权,请勿转载。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020年07月21日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档