less和sass基本使用

变量

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

LESS示例:

less 复制代码
@primary-color: #3498db;
@padding: 15px;

.article {
  background-color: @primary-color;
  padding: @padding;
}

SASS示例:

scss 复制代码
$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示例:

scss 复制代码
@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示例:

scss 复制代码
.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示例:

scss 复制代码
$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示例:

scss 复制代码
@import 'variables';
@import 'mixins';
@import 'base';

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

继承

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

LESS示例:

less 复制代码
.article {
  font-family: 'Open Sans', sans-serif;
}

.featured {
  .article;
  font-weight: bold;
}

SASS示例:

scss 复制代码
.article {
  font-family: 'Open Sans', sans-serif;
}

.featured {
  @extend .article;
  font-weight: bold;
}

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

参考文章:

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

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

相关推荐
LucianaiB7 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor
用户175923421502813 分钟前
D3.js - 基本用法
前端·d3.js
Mr.Liu629 分钟前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
76756047930 分钟前
useDateFormat源码解析
前端·源码
Mintopia30 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52031 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖31 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia31 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
贵州数擎科技有限公司32 分钟前
Threejs绘制小兩伞快拿去送给你的女神
前端
Carlos_sam33 分钟前
OpenLayers:封装Overlay的方法
前端·javascript