scss入门

拼搏现实的明天。 2023-07-20 05:41 9阅读 0赞

可以使用koala工具进行编译scss文件  
使用sublime text不支持scss语法高亮，可以下载一个插件  
[https://codeload.github.com/MarioRicalde/SCSS.tmbundle/legacy.zip/SublimeText2][https_codeload.github.com_MarioRicalde_SCSS.tmbundle_legacy.zip_SublimeText2]

解压完之后放到sublime Text的安装目录的Data\\Packages目录下，然后重启sublime text

语法介绍  
变量的支持使用美元符

$toolbar-size: 52px;
    .toolbar{
    	position:fixed;
    	left:50%;
    	bottom:5px;
    	margin-left:-$toolbar-size / 2;
    }

相同的css可以抽取成一个方法，使用@mixin语法

@mixin hbk($left,$right){
    	&:hover {
    		margin-left:$left;
    		margin-right:$right;
    
    	}
    }
    .top{
    	@include hbk(-200px,300px);
    }

并使用@include加载，编译之后的代码为

.toolbar {
      position: fixed;
      left: 50%;
      bottom: 5px;
      margin-left: -26px; }
    
    .top:hover {
      margin-left: -200px;
      margin-right: 300px; }

引入其他的scss文件，使用@import  
比如我们要引入一个hello.scss

@import "hello";

koala工具还支持代码压缩，挺好用的

[https_codeload.github.com_MarioRicalde_SCSS.tmbundle_legacy.zip_SublimeText2]: https://codeload.github.com/MarioRicalde/SCSS.tmbundle/legacy.zip/SublimeText2

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 scss入门

可以使用koala工具进行编译scss文件使用sublime text不支持scss语法高亮，可以下载一个插件 [https://codeload.github.co

拼搏现实的明天。/ 2023年07月20日 05:41/ 0 赞/ 10 阅读

相关全局scss

css: { loaderOptions: { sass: { prependData: ` @imp

快来打我*/ 2022年11月19日 04:29/ 0 赞/ 186 阅读

相关 scss/sass

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

比眉伴天荒/ 2022年11月11日 15:58/ 0 赞/ 192 阅读

相关 SCSS 笔记

SCSS 笔记内容来自 [sass语法总结][sass] 编译使用gulp-sass自动化编译 Gulp 配置 Sass 编译的示例代码： v

た入场券/ 2022年06月10日 12:13/ 0 赞/ 171 阅读

相关 scss

SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。 SASS是CSS3的一个扩展，增加了规则

不念不忘少年蓝@/ 2022年06月04日 01:37/ 0 赞/ 252 阅读

相关快速入门scss知识

scss语法介绍 -------------------- 1.自定义变量 $color:pink; .test1{ backgrou

以你之姓@/ 2022年05月29日 03:29/ 0 赞/ 211 阅读

相关 scss语法入门

目录 scss引入其他文件 scss注释方法 scss变量嵌套

雨点打透心脏的1/2处/ 2022年05月26日 09:21/ 0 赞/ 351 阅读

相关 common.scss

$theme-Color:004FBF; $theme-fontFamily:'.PingFangSC-Semibold'; $reguler-f

约定不等于承诺〃/ 2022年05月13日 11:08/ 0 赞/ 193 阅读

相关 SCSS 语法

前言：Sass是CSS预处理器，引入了变量、嵌套、mixin（混合）、运算以及函数等功能，且完全兼容 CSS 语法，而SCSS是Sass3版本当中引入的新语法特性。优点：

ゝ一世哀愁。/ 2022年02月14日 02:44/ 0 赞/ 306 阅读

相关 scss笔记

1.混合：常用于浏览器兼容性，使用@mixin name指令 @mixin border-radius($radius) { border

小灰灰/ 2021年12月21日 11:47/ 0 赞/ 286 阅读