scss基础语法的简单使用

1. 变量声明及使用

$color: red;
.box {
     color: $color;
}

2. mixin和include

2.1 简单使用
$bgColor: red;
@mixin bg {
    background: $bgColor;
}
.box {
    @include bg;
}

编译结果:

.box {
  background: red;
}
2.2 进阶使用
$namespace: 'zz';
@mixin B($name){
    $aaa: $namespace + '_' + $name;
    .#{$aaa} {
        @content;
    }
}
@include B(input) {
    font-size: 12px;
}

编译结果:

.zz_input {
  font-size: 12px;
}

3. 列表和循环

3.1 for循环
$list: red, green, blue;
@for $i from 1 through 3 {
    .status-#{$i} {
        color: nth($list, $i)
    }
}
@for $i from 1 to 4 {
    .status-#{$i} {
        color: nth($list, $i)
    }
}

注:nth可以获取数组的某个元素;
throughto的编译结果一致,要注意是的to走不到最后一个数

.status-1 {
  color: red;
}

.status-2 {
  color: green;
}

.status-3 {
  color: blue;
}
3.2 each循环
$list:red,green,blur;

@each $item in $list {
    .#{$item} {
        color: $item
    }
}

编译结果:

.red {
  color: red;
}

.green {
  color: green;
}

.blur {
  color: blur;
}

4. map结构

$colorMap: (
    fail: 'red',
    success: 'green',
    pendding: 'blue'
);
$bgColorMap: (
    fail: 'red',
    success: 'green',
    pendding: 'blue'
);
@each $key, $value in $colorMap {
    .#{$key} {
        color: $value;
        border-color: map-get($bgColorMap, $key)
    }
}

编译结果:

.fail {
  color: "red";
  border-color: "red";
}

.success {
  color: "green";
  border-color: "green";
}

.pendding {
  color: "blue";
  border-color: "blue";
}

5. 函数

@function vw($n) {
    @return calc($n*100vw/750)
};
@function px($n) {
    @return calc(#{var(--rootWidth)} * #{$n} / 1920);
}
@function vh($n) {
    @return calc($n * 100vh / 1080);
}
body {
    font-size: vw(10)
}
14 声望
1 粉丝
0 条评论
推荐阅读
Ant Design Vue 定制主题
方案一:全局引入在main.ts中引入组件库样式 {代码...} 方案二:按需引入通过less 的modifyVars属性vite.config.js {代码...} 这种方法要注意的是,组件是通过unplugin-vue-components插件来加载的,所以还要配置...

明未为洺阅读 154

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.1k评论 6

封面图
Three.js 进阶之旅:全景漫游-初阶移动相机版
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多...

dragonir12阅读 1.4k

封面图
巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画
这里我们借助了上面 #12、结构性伪类 中的 :root{ } 伪类,在全局 :root{ } 伪类中定义了一个 CSS 变量,取名为 --bgColor 。

chokcoco11阅读 2.9k

封面图
突发奇想!借助CSS自定义彩色字体来实现多行文本展开收起
之前写过这样一篇文章:CSS 实现多行文本“展开收起”,介绍了一些纯 CSS 实现多行文本展开收起的小技巧,特别是右下角的“展开收起”按钮,用到了浮动布局,非常巧妙,有兴趣的可以回顾一下。

XboxYan9阅读 1.2k

封面图
14 声望
1 粉丝
宣传栏