文章目录1 CSS响应式布局1.1 `name="viewport"`1.2 媒体查询1.3 百分比布局1.4 rem布局1.5 使用视口单位1.6 图片响应式1.6.1 使用 max-width1.6.2 使用 background-image1.7 成型方案2 显示模式2.1 块级元素(block)2.2 行内元素(inline)2.3 行内块元素( inline-block)3.盒子模型3
转载
2024-10-11 15:52:00
85阅读
一。【less中的变量】 1、声明变量: @变量名字:变量值 2、使用变量: @变量名 >>>less中变量的类型① 数字类 1 10px ②字符串: 无引号字符串red 有引号字符串"haha"③ 颜色类 red #000000 ragb() ④值列表类型:用逗号或者分隔 10px solid 10px >>>
转载
2024-07-31 19:33:21
155阅读
属性和选择器嵌套是非常伟大的特性,因为他们不仅仅减少了你的编写量,而且通过视觉上的缩jinx使编写的样式结构更加清晰,更易于阅读个开发。原生的css导入 原生的css的@import规则允许在一个css文件中导入其他css文件。但这样执行到@import时,浏览器才会执行其他的css文件,导致页面加载起来特别慢。 sass 的@import规则,在省城css文件时就把相关文件导入进来。这就意味着所
Sass是一种动态样式语言,比CSS多出好些功能(如变量、嵌套、运算、混入、继承、颜色处理、函数等),更容易阅读。Sass和Less是当下最为流行的2门CSS预处理语言(1)Sass由于是使用Ruby编写的,所以编译的时候是在服务器端处理;
而Less由于是使用JavaScript编写的,所以编译的时候是在浏览器端处理;
(2)Sass拥有更为强大的功能,如循环、函数、混合宏等,而less却没有;
目前最主流的CSS预处理器:Sass(SCSS)(基于Ruby)、LESS(基于NodeJS)、Stylus Sass是一款强化CSS的辅助工具,它在CSS语法的基础上增加了变量、嵌套、混合、导入等高级功能。使用Sass以及Sass的样式库(如Compass)有助于更好地组织管理样式文件,以及更高效地开发项目 特色功能完全兼容CSS3在CSS基础上增加变量、嵌套、混合等功能通过函数进行颜色值与
转载
2024-08-14 21:24:36
345阅读
xwei | 2012-07-07 | 网页重构什么是CSS预处理器?Css可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量、常量以及一些编程语法,代码难易组织和维护。这时Css预处理器就应运而生了。Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码
转载
2024-04-23 13:36:41
119阅读
Sass和Less都属于CSS预处理器;所谓CSS预处理器,就是用一种专门的编程语言,进行Web页面样式设计,再通过编译器转化为正常的CSS文件,以供项目使用。为什么要使用CSS预处理器?CSS有具体以下几个缺点:语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。这就导致了我们在工
转载
2024-06-13 19:02:37
129阅读
什么是css预处理器CSS 预处理器是一种语言。用通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式编写,再通过编译器转化为正常的 CSS 文件”,无需考虑浏览器的兼容性问题。可以在 CSS 中使用变量、简单的程序逻辑、函数等等,可以让你的 CSS 更加简洁,适应性更强,代码更直观等诸多好处。 但CSS预处理器也不是万金油,原生CSS的好处在于简便、随时随地被使用和调试。
scss里的符号&的用法 标签:HTML/CSS腾讯云SCSS用法符号 $代表定义变量$blue:#324157;
color:$blue;& 用在嵌套的scss代码里,来引用父元素.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
Scss基本语法1、变量声明:变量的定义很像Css中属性的声明,$highlight-color :#F90;变量可以在规则块定义之外存在,在规则块内定义的只能在规则块内使用,规则块外定义的则可以在本样式表的所有规则块使用。2、变量引用 $highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//编译后
转载
2024-06-01 09:29:37
1575阅读
想必大家学习CSS的时候一定接触过LESS和SASS吧,但可能还是有很多朋友对他们的概念模糊,下面不妨就跟着一起了解一下关于它们的故事。背景CSS(层叠样式表)是一门非程序式语言,入门学习使用非常直观方便,但是对于一些比较复杂或者重用性比较强的项目来说,因为CSS没有变量、函数、SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会
原创
2019-12-27 14:57:23
692阅读
less、scss/sass的区别一、less、scss/sassscss/sass是动态样式语言,比css多出很多功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更方便阅读和维护。less也是动态样式语言,一样也比css多处很多功能(如变量,继承,运算, 函数), Less 既可以在客户端上运行,也可在服务端运行 ( Node.js)。scss和sass的关系Sass是缩
转载
2024-09-06 20:56:56
143阅读
一. Sass/Scss、Less是什么?Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。Sass与Scss是什么关系?Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里
转载
2018-03-14 09:48:00
190阅读
2评论
一. Sass/Scss、Less是什么?Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。Sass与Scss是什么关系?Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容
转载
2021-08-12 16:04:48
252阅读
自从一个月前我偶然发现LESS之后我就开始坚定的使用它了。CSS本身对我来说从来不是问题,但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的想法。拥有一个提供固定数量选项可选的色盘可以让我避免颜色太跳跃以至于从一个已定的风格中脱离。事实证明,LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性,比如下面这些:● 混入(Mixins)——cl
最近打算学习Sass,正在阅读《Sass与Compass实战》。 收集一下网上学的知识。 有了解或者已经使用过的童鞋,都知道这两种这两年兴起的css预处理语言,赋予了动态语言的特性,如变量、 继承、 运算、 函数,弥补了css比较古板单一的缺点。这意味着通过一些预编译的语言可以把css写得更灵活,更动态化,从而提高前端的开发效率。另外很重要的一点是,他们的语法都是基于css的,让你在使用的时候
转载
2024-09-17 13:04:49
101阅读
scala常见笔试题(囊括了scala的精髓) scala最近几年很火,主要是因为其在大数据领域的应用。下面这些面试题,基本上是scala函数式编程的精髓。Q1 var,val和def三个关键字之间的区别?答:var是变量声明关键字,类似于Java中的变量,变量值可以更改,但是变量类型不能更改。还有一个lazy val(惰性val)声明,意思是当需要计算时才使用,避免重复计算Q2 tra
转载
2024-08-03 13:18:59
77阅读
SCSS 是 Sass 3 引入新的语法,是Sassy CSS的简写,是CSS3语法的超集,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。可以简单理解为scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力。语法形式上有些许不同,最主要的就是sass是靠缩进表示嵌套关系,scss是花括号。 区别:1、Sass是以“.sass”后缀为扩展名,而SCSS是以“.s
转载
2024-05-13 15:58:49
40阅读
目前写过的大多数项目都是cli搭建的, 拿一个简单的项目结构来详细说一下每个目录的作用.首先创建一个项目需要安装cli, 命令行全局npm安装即可npm install -g @vue/cli然后创建一个项目 cli2与cli3的命令是不同的 (project-name就是你的项目名称)vue create project-name // vue-cli3
vue init webpack
转载
2024-09-30 18:06:30
55阅读
第一次用strans是2014年,第二次就是2017年。。。最近看到有人在问EXCEL双表头的问题,想着就把STRANS导出EXCEL的方法保存下来吧。方便大家参考。1.已经记不清到底改做哪些类型的了,所以就自己做了个EXCEL模板。 这里用的是Excel 2016 (