首页 > 其他分享 >css预编译sass,css也可以变得优雅

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

时间:2024-04-06 16:03:24浏览次数:20  
标签:sass width color 混合器 100px height 编译 background css

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;}

标签:sass,width,color,混合器,100px,height,编译,background,css
From: https://blog.csdn.net/weixin_42554330/article/details/137297870

相关文章

  • 通过CSS设置元素水平垂直居中的方式大全
    元素水平垂直居中方法方案一、弹性盒子沿主轴和侧轴居中.outer{width:400px;height:400px;background-color:#888;display:flex;justify-content:center; align-items:ceter;}.inner{width:100px;height:100px;ba......
  • Linux下载编译ntfs-3g、安装移植、挂载ntfs格式的U盘
    目录前言1、NTFS-3G 简要说明2、NTFS-3G工具安装2.1离线下载ntfs-3g2.2在线下载ntfs-3g(推荐优先) 2.3解压安装ntfs-3g3、NTFS-3G工具移植到文件系统(rootfs)4、NTFS-3G工具挂载 4.1 查看U盘盘符4.2 U盘挂载 5、NTFS-3G源码编译报错问题记录5.1问题1:参......
  • CSS样式继承
    CSS样式继承是指子元素会继承父元素的某些样式属性。常见的可以继承的CSS属性包括font-family、color、font-size、line-height。1.color子元素会继承父元素的文字颜色。.parent{color:blue;}.child{/*子元素继承父元素的文字颜色*/}2.font-size......
  • CSS隐藏元素的多种方式
    CSS中隐藏元素有多种方式,主要区别在于元素隐藏后是否占据空间以及是否会对文档流产生影响。1.display:none完全隐藏元素,不占据任何空间。.demo{display:none;}2.visibility:hidden隐藏元素,但仍占据空间。.demo{visibility:hidden;}3.opacity:0......
  • centos7:从源代码编译安装:使用ntirpc v3.2+的 修改版:nfs-ganesha v2.8.4.1
    官方nfs-ganeshav2.8.4只能使用 ntirpc<=v3.1的版本。原因是ntirpcv3.2版本做了修改:github上比较 ntirpc:tagv3.1..tagv3.2结果如下: 所以,(参考高版本nfs-ganesha的代码)只能通过修改nfs-ganesha的源代码,来解决问题,需要修改的3个文件分别如下:/root/nfs-ganesh......
  • 62.html+css网页设计实例/“动漫”主题海贼王介绍/web前端期末大作业/
    一、前言  本实例以“动漫”海贼王为主题设计,div+css布局,页面代码简单,质量好,是个不错的学生网页设计作业源码。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交流分享,3Q!二、......
  • Typora编译器使用方法
    Typora编译器使用方法1)标题# 一级标题 ctrl+1## 二级标题 ctrl+2###三级标题 ctrl+3左上角段落有标题2)代码块```语言```sh#代码完整格式```sh```源代码快捷键ctrl+/3)列表Linux关机命令shutdownpoweroff重启shutdown-rreboot......
  • tomcat 8.5 本地编译代码
    1、下载地址:https://tomcat.apache.org/download-80.cgi 2运行1)解压zip压缩包2)目录创建进入解压目录,并创建一个目录,命名为home,并将conf、webapps目录移入home目录中3)修改成maven项目在当前目录下创建一个pom.xml文件,引入tomcat的依赖包,改造成maven项目,pom文件......
  • CSS设置网页颜色
    前言:我们在电脑显示器,手机屏幕,电视上面看到的颜色都是通用三种颜色混合而成的:红(red),绿(green),蓝(blue)简称为三原色,按照不同的比例就可以配出其他的颜色。在CSS中提供了一些属性可以用来设置颜色如color,可以用来设置文字的颜色,下列是描述颜色的6中方式:值说明例颜色名字......
  • Vue3 + TypeScript + Vite 初始项目搭建(ESLint、Prettier、Sass、Stylelint、husky、p
    仓库地址仓库地址:https://gitee.com/tongchaowei/vue-ts-vite-template项目源码下载:https://gitee.com/tongchaowei/vue-ts-vite-template/releases全局安装pnpm包管理工具执行如下命令在系统全局安装pnpm包管理工具:npmipnpm-g使用Vite脚手架创建Vue3......