速通sass基础语法

速通Sass语法:

sass的特点:

由于css的缺陷:无法自定义变量,不可引用,嵌套等。sass/scss/less等css预处理器产生。以sass为例,引入了变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数等诸多功能。方便css的开发维护。

变量

使用变量

sass 复制代码
div {
  color: $blue;
}

插值使用变量#{$var}

sass 复制代码
$side: left;
$my-radius: 5px;
.rounded {
  border-#{$side}-radius: $my-radius;
}
其中 border-#{$side}-radius: $my-radius; 渲染结果为:border-left-radius: 5px;

运算

sass 复制代码
$var: 100px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

嵌套

sass 复制代码
body{
	h3{
	  top:10px;
	}
}

注释

sass 复制代码
/* 块注释 */
// 行注释

混入(Mixin)

sass 复制代码
@mixin bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  @include bordered;
}
.post a {
  color: red;
  @include bordered;
}

函数

sass 复制代码
@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

判断逻辑

if-else

sass 复制代码
$color: red;
p {
  color: $color;
  @if $color == red {
    background-color: #000;
  } @else {
    background-color: #fff;
  }
}
for/while/each
sass 复制代码
@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}
其中.#{$member} 是#{$member}字符串插值写法。

继承

sass 复制代码
.class1 {
  border: 1px solid #ddd;
}

.class-sub {
  @extend .class1;
  font-size: 120%;
}
相关推荐
快乐是一切几秒前
PDF中的图像与外部对象
前端
前端开发呀6 分钟前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云枫晖10 分钟前
破壁前行:深度解析前端跨域的本质与实战
前端·浏览器
文心快码BaiduComate11 分钟前
代码·创想·未来——百度文心快码创意探索Meetup来啦
前端·后端·程序员
小白640215 分钟前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端
云和数据.ChenGuang19 分钟前
vue中构建脚手架
前端·javascript·vue.js
千与千寻酱25 分钟前
排列与组合在编程中的实现:从数学概念到代码实践
前端·python
朱昆鹏36 分钟前
如何通过sessionKey 登录 Claude
前端·javascript·人工智能
wdfk_prog37 分钟前
klist 迭代器初始化:klist_iter_init_node 与 klist_iter_init
java·前端·javascript
cjinhuo39 分钟前
标签页、书签太多找不到?AI 分组 + 拼音模糊搜索,开源插件秒解切换难题!
前端·算法·开源