当前位置: 首页 > article >正文

前端小白的学习之路(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的文件 对语法要求比较严格 
// 对换行、空格有要求
.box
  width: 1000px;
  height: 1000px;
  background-color: red;
  ul
    list-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.kler.cn/a/274680.html

相关文章:

  • Elasticsearch-分词器详解
  • Java基于SSM框架的无中介租房系统小程序【附源码、文档】
  • 【Spring事务】深入浅出Spring事务从原理到源码
  • Mysql复习(二)
  • powershell美化
  • PyCharm 中打印完整的 DataFrame
  • 百度交易中台之系统对账篇
  • 如何利用机器学习和Python编写预测模型来预测设备故障
  • 代码随想录阅读笔记-字符串【翻转字符串中单词】
  • Unity构建详解(2)——SBP的初始设置和脚本编译
  • 【自记录】VS2022编译OpenSSL1.0.2u
  • 电装DENSO 嵌入式岗笔试
  • Qt + HTTP 线程交互类封装
  • MNN createSession 之创建流水线后端(四)
  • 记录解决问题--activiti8.2 流程图图片由png改为svg前端不显示图片问题
  • word excel ppt转pdf
  • 常见传感器的原理 和 常见滤波算法实现
  • 开源模型应用落地-安全合规篇-模型输出合规性检测(三)
  • Bert的一些理解
  • 同步方法和同步块,哪个是更好的选择?什么是线程同步和线程互斥,有哪几种实现方式?
  • (简单成功)Mac:命令设置别名
  • 原生html vue3使用element plus 的树tree上移下移案例源码
  • 轻松解锁微博视频:基于Perl的下载解决方案
  • java算法题每日多道
  • 行业模板|DataEase制造行业大屏模板推荐
  • Angular进阶之八: Angular Animation在项目中的实践经验