代码编织梦想

一、css3中的变量命名(css3之前版本不能用)

1.定义需要在:root中进行定义,而且变量的名字前边必须带--

2.使用的时候需要用var来取到定义的变量

<style>
    :root{
        --col:red;
    }
    .id{
   width: 200px;
   height: 200px;
   background-color: var(--col);
    }
</style>
<body>
    <div class="id">
        hhh
    </div>

二、sass(css预处理器)的安装搭建

1.常见的css预处理器:sass(ruby环境)、less(node.js)、stylus

2.安装sass(使用vue中直接构建,不下载安装sass)

在创建vue的时候勾选下边所示的选项

   三、sass

1.定义及引用

$col:#cccccc;
.hot{
color:$col;
}

定义变量:sass使用$标识变量;(选择原因:!太丑了,且在css中没有其他使用$的)

使用变量的时候直接使用就可以了。

2.变量命名的时候变量名用中划线还是下划线跟据个人喜好

3.嵌套css规则:重复写选择器是非常麻烦的;sass可以让你只写一遍,且样式可读性高;

例如我们下边这个css的代码段,很多部分都是重复的

.cotain .col p{
color:red;
}

.cotain .col h3{
color:green;
}

.cotain .col h1{
color:blue;
}

.cotain .prep {
color:white;
}

我们就可以用sass进行改写为下边的代码通过嵌套的方式

.cotain{
 .col {
  p{
color:red;
}
 h3{
color:green;
}

 h1{
color:blue;
}

}

.prep {
color:white;
}

}


4.父选择器标识符&(当在嵌套规则中需要获取父选择器的时候(比如添加伪类选择器或伪元素的时候))

下边的代码中,&所代表的就是他的父类,也就是p 

.cotain{
 .col {
  p{
color:red;
&:hover:yellow;
}

}


5.群组选择器的嵌套(就是一个类下边多个类具有相同的属性的时候 如下边代码的p,h1,h2,h3,h4)

.cotain{
 .col {
  p,h1,h2,h3,h4{
color:red;
&:hover:yellow;
}

}


6.嵌套属性

甚至有的时候可以进行混合使用,这里就在设置boder样式的同时设置了boder-left和right

.map{
border:1px solid black{
left:0px;
right:0px;
}

}

7.运算

 

 

其中值得注意的是,+-左右放空格和单位;*/不要有空格不需要单位;

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_72694993/article/details/127208926

sass快速入门_super_ld的博客-爱代码爱编程

Sass (Syntactically Awesome StyleSheets) Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及

Sass快速入门-爱代码爱编程

什么是Sass和Less? 前端的小伙伴应该对less和sass都不陌生SassLessSass快速入门 1. 使用变量 你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。1-1. 变量声明 任何可以用作css属性值的赋值都 可以用作sass的变量值,甚至是以空格分割的多个属性值,或以逗号分割的多个属性

预处理器 Less 和 Sass 快速入门-爱代码爱编程

预处理器 Less 和 Sass 是什么?Sass与Scss是什么关系?Less 和 Sass 的区别Less 和 Sass 的使用LessSass Less 和 Sass 是什么? Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。 Less 既可以在客户端上运行 (支持IE 6+, Webkit

Sass基础应用-爱代码爱编程

本文摘自SASS中文网的快速入门和中文文档两部分,节选了一些我认为实用性比较强的内容。 目录 1.变量 $2.父选择器 &3.嵌套属性4.@import嵌套@import使用Sass部分文件5.默认变量值 !default6.静默注释 //7.混合器@mixin何时使用混合器混合器也支持CSS规则混合器传参默认参数8.使用选择器继承来精简CS

Sass 快速入门-爱代码爱编程

学习原因: $ $ 最近使用vue3时发现里面使用了sass,于是了解一下sass使用方法 1. sass 是什么? 图标 Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS的脚

Vue 的样式绑定和 Sass 快速入门 (七)-爱代码爱编程

前言 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因此,在将 v-bind 用于 class 和 style 时,Vue 做了专门的增强。本章将对此做详细的说明并额外推荐在项目中使用Sass提升样式的编码效率。 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换

sass快速入门-爱代码爱编程

1.使用变量 sass使用 符 号 来 标 识

豆瓣评分9.7,趁着开学季:聊聊东哥新书,互相交流经验,我们共同进步!_hahacoder的博客-爱代码爱编程

“ 关注hahaCoder 获取最新资讯” 01、前言 你好,我是石璞东。 为迎开学季,10.10 号晚7点我将联合人民邮电出版社、CSDN、阿里云开发者社区三大平台进行一次直播活动,直播内容包括: 个人经历分享(学习、比赛、实习等)东哥新书发布问题讨论 02、直播平台 我会在人民邮电出版社、CSDN以及阿里云开发者社区三大平台同步进行

jquery锚点导航定位、css设置头部左侧固定,右侧内容滚动_凌霄玉阶非所愿的博客-爱代码爱编程

锚点导航,点击左侧导航定位到标题 如图所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

sass详解_2q漆的博客-爱代码爱编程

SASS详解 变量 必须以$开头, 后面加上!default那就代表这个是当前变量的默认值。 $test-time-color: orange; div { color: $test-time-color; }

css--头歌(educoder)实训作业题目及答案_北沐xxx的博客-爱代码爱编程

目录 CSS——基础知识 第1关: 初识CSS:丰富多彩的网页样式 第2关: CSS样式引入方式 CSS——基础选择器 第1关: CSS 元素选择器 第2关: CSS 类选择器 第3关: CSS id选择器 CSS——文本与字体样式 第1关: 字体颜色、类型与大小 第2关: 字体粗细与风格 第3关: 文本装饰与文本布局 CSS—