less和sass基本使用

news/2024/10/15 17:36:07/

变量

变量在LESS和SASS中都以@符号定义,可以在全局范围内使用,也可以在局部范围内定义和使用。

LESS示例:

less">@primary-color: #3498db;
@padding: 15px;.article {background-color: @primary-color;padding: @padding;
}

SASS示例:

$primary-color: #3498db;
$padding: 15px;.article {background-color: $primary-color;padding: $padding;
}

使用变量可以轻松地统一修改样式,提高代码的可维护性。

混合(Mixins)

混合允许你定义可复用的CSS代码块,然后在多个地方调用这些代码块。

LESS示例:

less">.border-radius(@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;
}.article {.border-radius(10px);
}

SASS示例:

@mixin border-radius($radius: 5px) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;
}.article {@include border-radius(10px);
}

通过混合,我们可以避免重复编写相同的CSS代码,提高代码的复用性。

嵌套规则

嵌套规则允许你将CSS规则嵌套在其他规则内部,使得结构更加清晰,易于理解。

LESS示例:

less">.article {h1 {color: #e74c3c;}p {font-size: 16px;}
}

SASS示例:

.article {h1 {color: #e74c3c;}p {font-size: 16px;}
}

在LESS和SASS中,嵌套规则的写法非常相似,都使得CSS的结构更加接近HTML的结构。

内置函数

LESS和SASS都提供了大量的内置函数,用于处理颜色、字符串、数学运算等。

LESS示例:

less">@base-color: #f39c12;
@text-color: darken(@base-color, 30%);.article {color: @text-color;
}

SASS示例:

$base-color: #f39c12;
$text-color: darken($base-color, 30%);.article {color: $text-color;
}

内置函数使得样式的动态生成变得更加简单。

导入

导入功能允许你将多个CSS文件合并为一个,减少HTTP请求,提高页面加载速度。

LESS示例:

less">@import "variables.less";
@import "mixins.less";
@import "base.less";

SASS示例:

@import 'variables';
@import 'mixins';
@import 'base';

通过导入,我们可以将庞大的CSS项目分解为多个模块,提高代码的可读性和可维护性。

继承

继承允许一个选择器继承另一个选择器的样式,减少代码重复。

LESS示例:

less">.article {font-family: 'Open Sans', sans-serif;
}.featured {.article;font-weight: bold;
}

SASS示例:

.article {font-family: 'Open Sans', sans-serif;
}.featured {@extend .article;font-weight: bold;
}

继承使得我们可以在保持样式一致性的同时,减少代码的重复。

参考文章:

javascript - Sass(Scss)、Less的区别与选择 + 基本使用 - 个人文章 - SegmentFault 思否

Sass和Less(预处理器)「建议收藏」-腾讯云开发者社区-腾讯云 (tencent.com)


http://www.ppmy.cn/news/1539530.html

相关文章

PHP智慧餐饮新风尚点餐系统

智慧餐饮新风尚点餐系统 —— 美食与科技的完美碰撞 🍽️ 开篇:智慧餐饮的崛起 在快节奏的现代生活中,智慧餐饮正逐渐成为我们日常的一部分。随着科技的飞速发展,餐饮行业也在不断创新,力求为顾客提供更加便捷、高效…

SpringBoot教程(二十四) | SpringBoot实现分布式定时任务之Quartz(动态新增、修改等操作)

SpringBoot教程(二十四) | SpringBoot实现分布式定时任务之Quartz(动态新增、修改等操作) 前言数据库脚本创建需要被调度的方法创建相关实体类创建业务层接口创建业务层实现类控制层类测试结果 前言 我这边的SpringBoot的版本为2…

Go 语言中的格式化占位符

在 Go 语言中,fmt 包提供了大量的格式化占位符,用于格式化输出不同类型的数据。选择合适的占位符,可以确保输出的内容格式正确、清晰易懂。 常见的占位符: 基本类型 %v:按值的默认格式输出。适用于任何类型。%v&…

Android常用组件

目录 1. TextView 控件 常用属性: 1)android:text: 2)android:gravity: 3)android:textSize: 4)android:textColor: 5)android:background: 6)android:padding: 7)android:layout_width 和 andr…

基于SSM的微信小程序博客管理系统(博客1)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM的微信小程序博客管理系统实现与设计,实现了管理员与用户,管理员实现了用户管理、博文信息管理、博文类型管理、我的博文管理、个人名片分享管理、签到管理…

Vue 的 v-show 和 v-if 区别?

一、区别 v-show 和 v-if 是 Vue.js 中两种常用的指令,都可以用于控制元素的显示和隐藏,但它们有本质上的区别: 1)v-show 是通过控制元素的 Css display属性来显示或隐藏元素。无论条件是否为真,元素都会被渲染到 DOM中,只是通过…

使用Windows创建一个MFC应用【带界面】

MFC使用教程【对初学者保姆型友好!】 目录 前提条件 1:创建MFC应用程序 2. 项目结构解读 引用 外部依赖项 头文件 源文件 资源文件 文件功能详解 项目的主要流程 步骤2:配置OpenCV 安装OpenCV 包含目录与库文件 步骤3&#xff1…

kubernetes 中的微服务

微服务:用控制器来完成集群的工作负载,那么应用如何暴漏出去?需要通过微服务暴漏出去后才能被访问 - Service是一组提供相同服务的Pod对外开放的接口。 - 借助Service,应用可以实现服务发现和负载均衡。 - service默认只支持…