sass语法

在vscode中开发sass教程:sass语法 阅读详情

目录

 

一、css预处理器  scss语言

        1.变量

        2.数据类型

        3.运算符

        4.流程控制

        5.函数

    6.语言本身独有的特性

二、混合宏

三、占位符 % 优点:高效  缺点:不能接受参数

四、响应式


一、css预处理器  scss语言

        1.变量

            1)变量定义 $theme-color:#000;

            2)变量使用

                    (1)变量可直接使用在样式表的值部分

                            {}里面写的是样式表

                    (2)如果要使用在选择器或者属性部分,需要特定语法插值的支持

                    (3)#{  }插值的用法(重点)

                    (4)变量的默认值相当于把这个值优先级设到最低

                        (无论在页面的任何位置重新设置,值都会被覆盖)

                           $theme-color:#000 !default;(默认值)

                    (5)局部变量

                        Sass中变量的作用域是块级作用域

                        (一对花括号就是一个块)

                变量不会输出到css最终生成的样式中

                    (6)sass中的变量,控制结构….不会出现在最终生成的css中

        2.数据类型

                (1)数字:

                (2)字符串:有引号字符串或无引号字符串

                (3)颜色: blue是颜色(不是字符串)

                (4)布尔型:

                (5)空值:

                (6)值列表:用空格或者逗号分开

        3.运算符

                    + - * / (>  < != ==  %)

        4.流程控制

                (1)分支结构if

                (2)循环结构for  each(常用each)

        5.函数

                (1)自定义函数

                    @function add($a,$b){

                        @return $a+$b;

                    }

                (2)内置函数($debug相当于console.log)

                            $size:20px,30px,80px;
                            $class-name:"header";
                            $bg-color:blue;
                            $device-list:"pc","ipad","phone";

                            $device-map:(
                              "pc":20px,
                              "pad":30px,
                              "phone":80px
                            );

 

                            1.列表中的三个函数

                                @debug length($device-list);
                                @debug nth($device-list,2);
                                @debug index($device-list,"phone");

                            2.map中的两个函数(取值  取表)

                                @debug map_get($device-map,"phone");
                                @debug map_keys($device-map);
                                @debug map-values($device-map);

                            3.流程控制 循环for each(常用each)

                                @for $i from 1 through length($device-list){
                                      @if($i<2){
                                        .#{$class-name}-#{nth($device-list,$i)}{
                                          width: nth($size,$i);
                                                }
                                          }
                                }

                                        @each $v in map_keys($device-map){
                                          @debug $v;
                                          @debug map-get($device-map,$v);
                                        }

                                           @each $v in map_keys($device-map){
                                              .#{$class-name}-#{$v}{
                                                    width: map_get($device-map,$v)/2;
                                                  }
                                            }

 

    6.语言本身独有的特性

 

 

二、混合宏

三、占位符 % 优点:高效  缺点:不能接受参数

四、响应式

@media screen and (max-width:800px){
  body{
    background: #d7de4a;
  }
}
@media screen and (min-width:800px){
  body{
    background: #2fb9c2;
  }
}
@media screen and (min-width:1000px){
  body{
    background: #bf76ff;
  }
}

(1)从大屏到小屏

(2)从小屏到大屏

sass/scss语法汇总 阅读详情

相关推荐

Android System Slice应用加载分析,及启用Slice后,锁屏日期第一次开机正常显示,但后面锁屏不显示问题分析

最近发现Android P上锁屏界面,日期不显示,发现从P开始后,出现了Slice来允许应用以模块化,可交互的方式,插入多个使用场景。Android P的system UI 也使用到了这一特性,表现为锁屏时间,日期,勿扰图标,闹钟等。 如何使用Slice 以System UI中KeyguardSliceView.java来说明它的使用方法 首先,我们打开System UI 的mk 文件,可以看到以...

qq_33595823的博客 3035

使用scss实现自定义主题色

使用scss实现自定义主题色 定义变量 // --color 相当于全局定义的一个css变量 // var(--color) 用于引用 // 在页面样式的引用中,你将会看到 :root { // --bck: #c6e9fd; // --color:#0080cb; --bck: ''; --color:''; --bckImg1:url(../images/headerGreen.png); --bckImg2:url(../images/headerBlue.pn

weixin_44886911的博客 2306

esp32s3 spi camera gc6133调试

gc6133 spi只有master模式,同时需要esp32提供主时钟,需要有主时钟然后才能通过i2c进行初始化.测试了几种方式,记录如下。

hclydao的专栏 1564

html css控制切换主题颜色(背景色、字体颜色)

这句话的作用是设置你的默认主题色。--themeColor是自定义的名字,#ff9c6e 后边的颜色也是自定义;最后就可以实现 只改变 body里面的 themeColor: #ff9c6e;的颜色就可以同时改变其他的背景和字体颜色。然后在其他样式里面 引用这个颜色 var(--themeColor).js调用setProperty进行颜色值的控制,核心代码。在body 里面写一个公共的样式颜色。:只用改变这个背景颜色的透明度。

乐逍遥 2752

DataWorks数据安全治理最佳实践

DataWorks基于数据安全治理的常见思路,针对资产梳理、技术体系建设和运营体系建设,提供了一系列数据安全产品能力,您可通过“基础防护建设、数据安全防护措施及策略增强建设、数据安全持续运营”三个阶段在DataWorks上落地数据安全治理项目。参考本文启动数据安全治理项目前,建议您先了解DataWorks数据安全产品相关能力了解DataWorks数据安全产品能力后,您可参考如下三个阶段在DataWorks上落地数据安全治理项目。

soso1968的博客 1438

双有源桥变换器(DAB)TPS控制:从理论建模到Simulink/PSIM仿真实践

本文深入探讨了双有源桥变换器(DAB)的三重移相(TPS)控制技术,从理论建模到仿真实现。文章详细分析了TPS相比SPS和DPS的优势,阐述了其12种工况的划分逻辑与电流应力最优调制策略,并提供了在Simulink和PSIM平台搭建仿真模型的详细步骤与实战经验,帮助工程师掌握这一高效控制方法。

white的博客 584

2-3 Sass的函数功能-列表函数

列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值; nth($list, $n):返回一个列表中指定的某个标签值 join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表; append($list1, $val, [$separ...

weixin_30682415的博客 201

kubedns-coredns部署pod出现not ready问题

文章目录遇到的问题1、发现问题2、排查问题3、解决方法 coredns的实例health_check不通过的问题,排查和解决方法 遇到的问题 1、发现问题 pod启动但是未ready 查看是readiness失败 使用对应的URL进行curl,发现真的返回503 2、排查问题 查看错误日志,发现一堆这个错误"waiting on : kubernetes" 网上相关的问题解答 这个跟测试场景不一样,这个案例是开了防火墙,可以确认我这个案例的机器没有开防火墙,但它提醒了一点,coredns是需要访问ap

u012533481的博客 2844

theme 项目换肤方案

在element UI官网有更换主题的方式大家可以参考。但是在实践过程中如果想实现动态切换主题,就比较麻烦了。个人总结了两种方式(如果有其他方式,欢迎留言)。

webtext的博客 316

【论文复现】——基于改进FPFH特征提取的点云模板匹配方法

基于改进FPFH特征提取的点云模板匹配方法 [J]. 应用激光, 2024, 44 (04): 196-204.

点云侠的博客 611

YOLO26涨点改进 |TGRS 2026 | 全网独家改进、特征融合创新篇 | 引入CMIFE跨模态交互特征提取模块,充分挖掘互补信息,适合多模态图像融合,目标检测,实例分割,遥感图像分类高效涨点

本文提出CMIFE模块用于改进YOLO26网络模型,通过跨模态交互特征提取实现多尺度特征的精细化融合。该模块采用双注意力机制(自注意力强化模态内一致性,交叉注意力实现跨模态互补信息筛选),有效解决了传统YOLO融合中的信息冗余和负迁移问题。实验表明,CMIFE模块在保持模型实时性的同时,显著提升了小目标检测、遮挡场景等复杂环境下的检测精度。文章详细介绍了模块原理、网络结构、核心代码实现方法,并提供了三种改进版YOLO26的配置文件方案(yolo26_CMIFE-1/2/3.yaml)。

Ai缝合怪、助力小伙伴高效发论文 147

less合集(二):动态修改主题颜色一键换肤

需求背景: 1:在需求中,一个平台样式风格基本保持统一;因而需设置一个全局样式配置 2:有时需要可以根据后端数据返回,动态修改主题颜色 方式一 适用技术:css,less,sass等 适用场景:颜色种类不固定的场景 1:在index.html文件中增加配置 <script> window.onload = () => { // 设置主题色 // --buttonColor是自定义的按钮背景样式代号 // 可动态修改,eg:由后端返回接受,可由前端事件修改.

hyduan_h5的博客 5801

MicroCap声学仿真介绍(二)-创建声学仿真元件

声学库里包含孔、管、障板辐射器等器件,我们只需要按照仿真的需求,将声学库里的器件排列好,输入参数,用线连接起来即可。这里我们用D指代孔的直径,L指代孔的长度,N代表孔的数量。26.在弹出的界面中做如下设置:需要先在右面的选框里找到对应的项,然后右键Add Part,再之后就如下设置。3.在弹出的界面中,选择“Macro file(.mac)”,并点击右上角的“OK”下面就以声学仿真中常见的“孔”来做示例,跟大家一块演示一下宏程序的新建。10.在上图中“Value”中填入“R”,然后点击左边的“OK”按钮;

山无忧的博客 2199

Sass 语法

Sass 语法

qq_20765533的博客 1879

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Sass的常用语法

文章目录基本用法变量@mixin函数继承@extend注释 在学习阮一峰的SASS用法指南和网上一些视频,总结sass常用语法 基本用法 首先要下载Ruby语言(略) 将scss生成css文件,在命令行输入 //直接生成压缩后的css文件 sass --style compressed new.scss new.min.css //监视某个文件下的scss改变就会直接生成css sass -...

schooling_chan的博客 1万+

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

Sass 语法详细介绍

Sass的语法怎么使用?使用的一些方式和一些弊端

努力的鋜 723

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

sass的基本语法

一.定义 sass的基本语法 1,注释:**************************************** 单行注释 // 多行注释 /* */ 2,变量**************************************** $变量名称 : 变量的数值 便于后期的维护和修改 例如今天是5:12,要改变样式为黑白配色 之前的css要改变所有的样式设定,现在

DcTbnk的博客 1563

SASS常用语法

SASS常用语法 SASS在实际开发中起到了非常便捷的作用,并且简化了css中繁琐的选择器操作 实例 HTML结构 <div id="box"> <div class="d1"> <p> <span>我在最里面</span> </p> <span></span> &l...

Nicis的博客 340

sass基础语法

Sass/SCSS是一种CSS预处理器,提供变量、嵌套、混合宏等高级功能增强CSS编写效率。基础语法包括变量定义($var)、嵌套规则、父选择器(&)、复用代码块(@mixin)和模块化导入(@use)。支持条件判断(@if)、循环(@for/@each)等逻辑控制,并能通过@extend实现样式继承。推荐使用SCSS语法(.scss文件),配合Dart Sass等工具编译为CSS。开发建议采用模块化文件结构(_partials.scss)、命名规范化和占位符优化代码组织。

在全栈和前端徘徊的程序员 976

Sass语法

Sass语法 众所周知,css不是一门编程语言。他没法像js和python那样拥有逻辑处理的能力,甚至导入其他的css文件中的样式都做不到。而Sass就是为了解决css的这些问题。他它允许你使用变量、嵌套规则、 mixins、导入等众多功能,并且完全兼容css语法。Sass文件不能直接被网页所识别,写完Sass后,还需要专门的工具转化为css才能使用。 Sass文件的后缀名: Sass文件有两种后...

唯美清泠 305

sass语法总结

sass语法 文章目录sass语法1.变量2.注释3.条件分支4.循环分支for循环each循环5.选择器嵌套6.属性的嵌套7.混入(混合器/函数)8.继承9.导入 1.变量 语法$名字:值; 变量名是 $名字 值不需要引号 变量使用 直接使用变量名 只要变量值修改,所有是使用这个变量的值都变了 scss $color: green; $fs: 30px; $border: 1...

k464746的博客 1000

SASS - 语法

SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS – @extend(继承)指令 SASS – 操作符 SASS – 函数 SASS – 输出格式 2种语法 Sass有两种不同的语法,一种是旧版,另一种是升级版,这两种语法都会编译出相同的CSS...

吴吃辣 326

CSS、SCSS 和 SASS 的语法差异

CSS、SCSS 和 SASS 的语法差异

2302_79444883的博客 940

sass语法_Sass:语法很棒的样式表

sass语法 介绍 (Introduction) 使用HTML和CSS创建网页效果很好,但是缺乏Sass提供的多功能性。 我不是Sass专家,但是我已经在几个项目中使用了它,这非常棒。 如果您想了解有关Sass的更多信息,如何安装Sass和所有爵士乐,请在此处查看文档站点。 There are two main ways to write Sass cod...

cunchi8090的博客 532
上一篇: 前端学习总结
下一篇: github上传步骤
sunshinefcc
博客等级 码龄10年 17粉丝 38原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值