wordpress怎么搜索网站,域名备案查询网站备案,恒天安装wordpress教程,东莞网站建设方案外包1、介绍及概述
1.1、解释
less 是方便开发人员书写CSS的一门预处理语言。浏览器只认识html /css /js格式的文件#xff0c;所以直接引入.less文件#xff0c;没有任何的效果#xff0c;需要把less文件转换成css文件
1.2、概述
CSS弊端#xff1a; 没有逻辑性、变量、函…1、介绍及概述
1.1、解释
less 是方便开发人员书写CSS的一门预处理语言。浏览器只认识html /css /js格式的文件所以直接引入.less文件没有任何的效果需要把less文件转换成css文件
1.2、概述
CSS弊端 没有逻辑性、变量、函数、作用域、不利于复用更没有计算 介绍 less是css的预处理语言除了less还有scss(sass)、stylus这些预处理语言。 官网 less官网地址 特点 LESS将CSS赋予了动态语言的特性如变量 继承 运算 函数LESS既可以在客户端上运行 (支持IE 6, Webkit, Firefox)也可以借助Node.js在服务端运行 安装 在node.js中安装less工具 全局安装npm install less -g项目依赖npm install less --save检查版本测试是否安装成功输入lessc -v检查版本号 在vscode安装插件 easy less
2、变量使用及解释
// 声明变量 使用符号代码结束后需要添加分号w: 100px;h: 100px;color: skyblue;// 1、变量运算 - 两边需要有空格单位不一致的情况下以左边的单位为准.box3 {width: w 10; // 结果100px 10 110pxheight: h - 30rem; // 结果100px - 30 70px这里因为单位不同以左边为准所以是70pxbackground-color: color;font-weight: w*4rem; // 结果100px * 4 400px单位还是以px为准font-size: (h / 2); // 结果100px / 2 50px除法需要添加()}// 2、作用域 全局/局部作用域变量作用域遵循就近原则// 2.1、w: 300px; 会覆盖前面w的值也就是全局作用域、全局变量// 2.2、局部作用域.box4 {w: 300px; // 不会覆盖前面w的值也就是局部作用域局部变量width: w;}// 3、选择器变量了解// 3.1、声明变量让它选择器bb: #wrap; // 这个id为wrap的值赋值给bb使用// 3.2、使用变量来设置元素的宽度但注意需要使用{}去包裹一下表示这是一个元素而不是变量{bb} {width: w;}// 3.3、还可以只存值使用时前面携带选择器符号 aa: content;.{aa} {height: h;}// 4、属性变量可以减少代码的书写量mr: margin-right; // 把属性名赋值给变量使用时用{}包裹即可.box5 {{mr}: 5px;}// 5、url 变量url: ../../img; // 把重复的路径地址赋值给变量.box6 {background: url({url}/1.png);}.box7 {background: url({url}/2.png);}// 6、声明变量 类似于下面的混合方法存储多个样式值使用时写成变量名()即可bg: {background-color: blue;color: red;};.box9 {bg();} .box10 {width: w;height: h;bg();}3、常用语法
// 1、嵌套.wrap {background-color: #ccc;.header {color: #333;padding: 10px;.left {float: left;#info {a {color: #333;}// 2、父级引用 代表了父级元素也可以使用#info::after这种原本的形式添加::after {font-size: 30px;}}}.right {float: right;}}}// 3、媒体查询.component {width: 300px;media (min-width: 768px) {width: 600px;media (min-resolution: 192dpi) {background: red;}}media (min-width: 980px) {background-color: yellow;}}// 4、混合 注意声明的时候加()就不会在css中生成.card {color: pink;}// 4.1、第一种写法无参调用时不添加().box11 {.card; font-size: 20px;}// 4.2、第二种写法无参调用时添加().box12 {.card(); margin: 10px;}// 4.3、携带参数// 1编写.card2(a,b,c){ // 1.1、声明形参a,b,c3个变量margin: a b; // 1.1、使用实参中的值设置外边距和字体大小font-size: c;}// 2使用 .box13 {.card2(10px, 20px,30px);}// 4.4、携带参数并设置默认参数.card2(a,b,c:10px) {margin: a b;font-size: c;}.box14 {.card2(10px, 20px);}// 5、import 导入文件可以引入任何css和less文件import url(./03.27-11b.less);4、补充——sass和stylus
4.1、sass语法
安装: 安装全局npm i sass -g项目中安装依赖npm i sass -D vscode安装插件easy sass创建sass文件 sass/scss说明sass是老版本scss是新版本的语法升级支持css3特性 {}文件后缀 .scss 文档地址 文档地址 示例
/* sass */
.fatherwidth:100px;.sonwidth:50px;
/* scss */
.father{width:100px;.son{width:50px;}
}4.2、stylus
官网地址stylus文件后缀.styl简单介绍以截图形式
