css预编译sass,css也可以变得优雅

news/2024/4/17 7:30:06

1. 嵌套选择器

#content {article {h1 { color: #333 }p { margin-bottom: 1.4em }}aside { background-color: #EEE }
}

编译后

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

2. 变量声明和使用

$width: 100px;
$height: 100px;
$bg-red: #ff4040;
.box{width: $width;height: $height;background: $bg-red;
}

编译后

.box{width: 100px;height: 100px;background: #ff4040;
}

3. 父选择器标识符&

article a {color: blue;&:hover { color: red }
}

编译后

article a { color: blue }
article a:hover { color: red }

4. 嵌套属性

nav {border: {style: solid;width: 1px;color: #000;}
}

编译后

nav {border-style: solid;border-width: 1px;border-color: #ccc;
}

5. 混合器(整合重复代码)

  • @mixin 定义混合器
  • @include 使用混合器
  1. 定义混合器
@mixin box-style {width: 100px;height: 100px;
}
  1. 使用混合器
.box1{background: cyan;@include box-style;
}
.box2{background: #ff4040;@include box-style;
}

编译后

.box1{background: cyan;width: 100px;height: 100px;
}
.box2{background: #ff4040;width: 100px;height: 100px;
}

6. 给混合器传参

  • @mixin接收参数使用 @include传参,这种方式跟JavaScript的function很像
  1. 定义混合器
@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}
  1. 使用混合器并传参进去
a {@include link-colors(blue, red, green);
}

编译后

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

7. @for

用法1:through

条件范围包含 start 与 end 的值 @for $var from <start> through <end>

@for $i from 1 through 3 {.w-#{$i * 100} { width: 100px * $i; }
}

编译后

.w-100 {width: 100px;}
.w-200 {width: 200px;}
.w-300 {width: 300px;}

用法2:to

条件范围只包含 start 的值不包含 end 的值 @for $var from <start> to <end>

@for $i from 1 to 3 {.w-#{$i * 100} { width: 100px * $i; }
}

编译后

.w-100 {width: 100px;}
.w-200 {width: 200px;}

https://www.xjx100.cn/news/3365573.html

相关文章

【Java+Springboot】----- 通过Idea快速创建SpringBoot项目操作方法

一、第一步&#xff1a; 点击选择【File】->【New】-> 【Project】 最后弹出[new Project]界面。 二、第二步&#xff1a; 1. 选择【Spring Initializr】 2. 然后选择【Project SDK】的版本 3. 然后 Choose Initializr Service URL 选择默认&#xff08;Default&#x…

自定义注解@Log 插入操作日志

一&#xff0c;注解描述 // 作用位置&#xff0c;参数 方法 Target({ElementType.PARAMETER, ElementType.METHOD}) // 作用范围 运行时 Retention(RetentionPolicy.RUNTIME) Documented public interface Log {/*** 模块*/public String title() default "";/*** 模…

搜维尔科技:借助 ARVR 的力量缩小现代制造业的技能差距

借助ARVR的力量缩小现代制造业的技能差距 搜维尔科技&#xff1a;Senseglove案例-扩展机器人技术及其VR应用

mybatis批量新增数据

数据量大的时候如果在循环中执行单条新增操作&#xff0c;是非常慢的。那么如何在mybatis中实现批量新增数据呢&#xff1f; 方法 insert 标签的 foreach 属性可以用于批量插入数据。您可以使用 foreach 属性遍历一个集合&#xff0c;并为集合中的每个元素生成一条插入语句。…

朵米3.5客服系统源码2023正式版

源码简介 朵米客服系统是一款全功能的客户服务解决方案&#xff0c;提供多渠道支持&#xff08;如在线聊天、邮件、电话等&#xff09;&#xff0c;帮助企业建立与客户的实时互动。该系统具有智能分流功能&#xff0c;可以快速将客户请求分配给适当的客服人员&#xff0c;提高…

tomcat 知多少

Tomcat的缺省端口&#xff1a; 默认端口为8080&#xff0c;可以通过在tomcat安装包conf目录下&#xff0c;service.xml中的Connector元素的port属性来修改端口。 tomcat 常见 Connector 运行模式(优化)&#xff1a; 这三种模式的不同之处如下&#xff1a; BIO &#xff1a; 一…

练气第六天

问:ANR怎么分析&#xff1f; ANR问题&#xff0c;这其实是一个非常综合性的问题&#xff0c;因为anr会涉及CPU负载&#xff0c;内存空间大小&#xff0c;线程锁&#xff0c;GC回收&#xff0c;这里面每个点&#xff0c;都是非常考验我们基本功的。 分析ANR问题&#xff0c;需…

AtCoder Beginner Contest 347 (B,C,D,E)

B - Substring (atcoder.jp) 问题陈述 您将得到一个由小写英文字母组成的字符串 S 。 S 有多少不同的非空子字符串? 子字符串是一个连续子序列。例如&#xff0c; xxx 是 yxxx 的子字符串&#xff0c;但不是 xxyxx 的子字符串。 解析&#xff1a; 对于数据范围不超过100&…