前端小白的学习之路(lessscss)

提示:less,sass&scss

目录

一、less

1.变量

2.嵌套规则 

3.混合

4.针对属性值进行操作的函数

5.循环

6.拓展语法

二、scss&sass

1.sass 

2.scss


一、less

是一个开源的、基于 CSS 的预处理器,它使得编写和维护 CSS 更加简单和高效。通过使用 Less,你可以使用类似于编程语言的结构,如变量、嵌套、混合(Mixins)、函数等,来组织和管理你的样式表。Less 的语法比原生的 CSS 更加灵活和强大,使得开发者能够更轻松地构建复杂的样式。

1.变量

/* 
*
* 1) 声明变量
*
* 
*/@color: #ff5500;
@w: 1000px;
@h: 80px;
@bgColor: #f3e4ca;
@pad: 0 20px;
@borderColor: #ff5500;.container {width: @w;margin: 0 auto;
}

2.嵌套规则 

/* 
*
* 2) 嵌套规则
*
* 
*/.index-header {height: @h;line-height: @h;background-color: @bgColor;padding: @pad;.logo {color: @color;font-size: 40px;font-weight: bold;}
}// 过去的做法
// .index-nav {}
// .index-nav ul {}
// .index-nav ul li {}
// .index-nav ul li  a {}// 现在的做法
.index-nav {padding: @pad;ul {width: 100%;height: 80px;display: flex;align-items: center;border-bottom: 2px solid @color;li {margin: 0 15px;a {color: @color;text-decoration: none;}}}
}

3.混合

/* 
*
* 3) 混合
*  可以重复使用的代码块
* 
*/@width: 50px;
@height: 50px;.size() {width: @width;height: @height;
}.base() {content: "";display: block;position: absolute;top: 0;left: 0;border-radius: 50%;
}.addColor(@c: red) {background-color: @c;
}.icon-heart {display: inline-block;vertical-align: middle;position: relative;// 在less 文档 可以直接使用加减乘除 + - * / margin: (@width / 2) (@width / 2);transform: rotate(45deg) scale(1);.size();.addColor(red);// 伪类元素&::before {.base();.size();.addColor(red);left: -(@width / 2);}&::after {.base();.size();.addColor(red);top: -(@width / 2);}
}

4.针对属性值进行操作的函数

/* 
*
* 4) 针对属性值进行操作的函数
*  向上取整  向下取整  
* 
*/
.box {width: (1000px / 3);width: floor((1000px / 3));width: ceil((1000px / 3));
}ol {list-style: none;padding: 0;margin: 0;
}

5.循环

// 5) 循环 1 2 3 4 5 6
.loop(@i) when (@i < 7) {// less文档中字符串.demo-@{i} {margin-top: 5px;width: 50px + (@i * 50);height: 10px;background-color: rgba(255,0,0, (@i / 10));}.loop(@i + 1);
}
// 使用.loop()
.loop(1);
// 字符串拼接
// @i: 1;
// .demo-@{i} {
//    

6.拓展语法

// 6) 拓展语法 (代码重复使用)
.square {width: 100px;height: 100px;background-color: deepskyblue;margin-top: 10px;
}.circle:extend(.square) {border-radius: 20px;
}

 注:less中有两种注释方式,//不会编译到.css文件中,/**/会编译到.css文件中

二、scss&sass

1.sass 

// 声明变量
$color: red;// 后缀名为.sass的文件 对语法要求比较严格 
// 对换行、空格有要求
.boxwidth: 1000px;height: 1000px;background-color: red;ullist-style: none;li border-bottom: 1px solid #ccc;

注:旧的版本已经不推荐使用 

2.scss

// 注释1
/*注释2*//*
*
*
*1) 声明变量
*
*
*/
$color: red;
.box {color: $color;
}/*
*
*
*2) 嵌套规则
*
*
*/
.nav {width: 1000px;ul {list-style: none;li {border-bottom: 1px solid #ccc;a {text-decoration: none;height: 40px;line-height: 40px;}}}
}/*
*
*
* 3) 混合语法 
*  可重复使用的代码块
*
*/
@mixin size(){width: 1000px;height: 100px;
}
@mixin addColor($c:red){background-color: $c;
}.header {@include size();@include addColor();
}
.footer {@include size();@include addColor(green);
}
.nav {@include size();@include addColor(blue);
}// 4) 运算 + - * / 
.image-box {width: (256px / 2);
}// 5) 函数
.text-box {width: floor(1000.99999px);
}// 6) 循环
// 写法1:
@for $i from 1 to 5 {// 字符串拼接.demo-#{$i}{width: 100px + (10px * $i);}
}// 写法2:
@each $key in header nav  footer {.#{$key}-demo{width: 100px;}
}// 7) 拓展语法
.square {width: 100px;height: 100px;background-color: pink;
}
.circle {@extend .square;border-radius: 50%;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/757241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web前端之多种方式实现switch滑块功能、动态设置css变量、after伪元素、选择器、has伪类

MENU 效果图htmlcsshtmlcssJS 效果图 htmlcss html <div class"s"><input type"checkbox" id"si" class"si"><label for"si" class"sl"></label> </div>style * {margin: 0;pad…

refreactive vue3

ref 可以定义:基本类型、对象类型的响应式数据 reactive 只能定义:对象类型的响应式数据 <template><div class"person"><h2>Name: {{ name }}</h2><h2>Age: {{ age }}</h2><h2>Tel: {{ tel }}</h2><button cl…

lftp服务与http服务(包含scp服务)详解

目录 前言: 1.lftp服务 1.1lftp服务的介绍以及应用场景 1.2安装lftp服务 1.2进行配置 1.3实际操作 2.http服务 2.1http服务介绍以及应用场景 2.1安装httpd服务 2.2进行配置 2.3实际操作 3.scp服务 3.1scp服务的介绍以及应用场景 致谢: 前言: 在当今互联网…

蓝桥杯模块综合——高质量讲解AT24C02,BS18B20,BS1302,AD/DA(PCF8591),超声波模块

AT24C02——就是一个存储的东西&#xff0c;可以给他写东西&#xff0c;掉电不丢失。 void EEPROM_Write(unsigned char * EEPROM_String,unsigned char addr , unsigned char num) {IIC_Start();IIC_SendByte(0xA0);IIC_WaitAck();IIC_SendByte(addr);IIC_WaitAck();while(nu…

arm 解决Rk1126 画框颜色变色问题(RGB转NV12)

在Rv1126上直接对Nv12图像进行绘制时&#xff0c;颜色是灰色。故将Nv12转BGR后绘制图像&#xff0c;绘制完成后转成Nv12&#xff0c;BGR的图像颜色是正常的&#xff0c;但是NV12的图像颜色未画全&#xff0c;如图&#xff1a; 1.排查发现是RGB转NV12的函数出现问题&#xff0c…

理清大数据技术与架构

大数据并不是一个系统软件&#xff0c;更不是一个单一的软件&#xff0c;它实际上是一种技术体系、一种数据处理方法&#xff0c;甚至可以说是一个服务平台。在这个技术体系中&#xff0c;涵盖了许多不同的部件&#xff0c;比如Hadoop服务平台。这一服务平台可以根据具体情况自…

微软AI系列 C#中实现相似度计算涉及到加载图像、使用预训练的模型提取特征以及计算相似度

在C#中实现相似度计算涉及到加载图像、使用预训练的模型提取特征以及计算相似度。你可以使用.NET中的深度学习库如TensorFlow.NET来加载预训练模型&#xff0c;提取特征&#xff0c;并进行相似度计算。 以下是一个使用TensorFlow.NET的示例&#xff1a; using System; using …

6-187 编写函数实现直接插入排序

编写函数实现直接插入排序。输入若干正整数,以0结束,采用直接插入排序将这些整数按照从大到小的顺序排序。 函数接口定义: void InsertSort(SqList &L); 其中 L 是待排序的关键字,采用顺序表存储。 裁判测试程序样例: #include <iostream> using namespac…

【源码&教程】基于GAN的动漫头像生成系统

1.研究背景 我们都喜欢动漫角色&#xff0c;并试图创造我们的定制角色。然而&#xff0c;要掌握绘画技巧需要巨大的努力&#xff0c;之后我们首先有能力设计自己的角色。为了弥补这一差距&#xff0c;动画角色的自动生成提供了一个机会&#xff0c;在没有专业技能的情况下引入定…

【测试开发学习流程】MySQL函数运算(中)(下)

前言&#xff1a; 这些天还要搞毕业论文&#xff0c;东西少了点&#xff0c;大家将就看看QWQ 目录 1 MySQL的数据处理函数 1.1 文本处理函数 1.2 日期与时间函数 1.3 数值处理函数 1.4 系统函数 2 聚集运算 2.1 聚集函数 2.2 流程函数 1 MySQL的数据处理函数 MySQL支…

MySQL写shell的问题

写shell用什么函数&#xff1f; select <?php phpinfo()> into outfile D:/shelltest.phpdumpfilefile_put_contentsoutfile不能用了怎么办&#xff1f; select unhex(udf.dll hex code) into dumpfile c:/mysql/mysql server 5.1/lib/plugin/xxoo.dll;可以UDF提权https…

WanAndroid(鸿蒙版)开发的第六篇

前言 DevEco Studio版本&#xff1a;4.0.0.600 WanAndroid的API链接&#xff1a;玩Android 开放API-玩Android - wanandroid.com 其他篇文章参考&#xff1a; 1、WanAndroid(鸿蒙版)开发的第一篇 2、WanAndroid(鸿蒙版)开发的第二篇 3、WanAndroid(鸿蒙版)开发的第三篇 …

HarmonyOS应用开发者高级认证答案

** HarmonyOS应用开发者高级认证 ** 以下是高级认证答案&#xff0c;存在个别选项随机顺序答案&#xff0c;自行辨别 判断题 云函数打包完成后&#xff0c;需要到 AppGallery Connect 创建对应函数的触发器才可以在端侧中调用 错 在 column 和 Row 容器组件中&#xff0c;a…

Nexpose v6.6.242 for Linux Windows - 漏洞扫描

Nexpose v6.6.242 for Linux & Windows - 漏洞扫描 Rapid7 Vulnerability Management, Release Mar 13, 2024 请访问原文链接&#xff1a;https://sysin.org/blog/nexpose-6/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.o…

设计模式 抽象工厂

01.人类接口 public interface Human { //首先定义什么是人类//人是愉快的&#xff0c;会笑的&#xff0c;本来是想用smile表示&#xff0c;想了一下laugh更合适&#xff0c;好长时间没有大笑了&#xff1b; public void laugh(); //人类还会哭&#xff0c;代表痛苦 public v…

极客SaaS框架开源包

可以自备 听说后边要出saas去水印小程序 saas短视频去重小程序

Java数据结构-二分查找学习

文章目录 前言一、通常情况下的两种二分查找的形式1.经典款2.左闭右开款 二、做题题解中的二分查找的变形1.有效的完全平方数&#xff08;LeetCode367&#xff09; 前言 因为最近刷到二分查找的题目学习到了不同的写法&#xff0c;因此在这里总结一下&#xff0c;方便之后遗忘…

数据结构和算法模块——队列(多例子+图文)

一文帮你看懂队列 什么是线性表为什么要学习线性表&#xff0c;它有什么用处和好处&#xff1f;基本概念分类存储结构结构特点 队列为什么要学习队列&#xff1f;基本概念数据结构基本操作 待填坑 什么是线性表 为什么要学习线性表&#xff0c;它有什么用处和好处&#xff1f;…

docker入门(三)—— 安装docker

docker 安装 环境要求 本次使用的是云服务器&#xff0c;版本是 centos&#xff0c;要求版本在3.10以上 [rootiZbp15293q8kgzhur7n6kvZ /]# uname -r 3.10.0-1160.108.1.el7.x86_64 [rootiZbp15293q8kgzhur7n6kvZ /]# cat /etc/os-release NAME"CentOS Linux" VE…

操作系统核心知识点大梳理

计算机结构 现代计算机模型是基于-冯诺依曼计算机模型 计算机在运行时&#xff0c;先从内存中取出第一条指令&#xff0c;通过控制器的译码&#xff0c;按指令的要求&#xff0c;从存储器中取出数据进行指定的运算和逻辑操作等加工&#xff0c;然后再按地址把结果送到内存中去…