css转换成scss,postcss-less2scss：将 Less 转换成 Scss 的 PostCSS 插件

最新推荐文章于 2024-05-17 09:46:06 发布
最新推荐文章于 2024-05-17 09:46:06 发布
阅读量647 收藏
点赞数
文章标签： css转换成scss

发布一个 PostCSS 插件：postcss-less2scss，可以将 Less 文件转换为 Scss。

* GitHub：https://www.npmjs.com/package/postcss-less2scss

* NPM：https://www.npmjs.com/package/postcss-less2scss

转换变量

转换变量的定义和使用

不属于任何一个 Rule 的变量

Less:

@link-color: #428bca;

Scss:

$link-color: #428bca;

在某个 Rule 中定义的变量

Less:

#main {

@width: 5em;

width: @width;

}

Scss:

#main {

$width: 5em;

width: $width;

}

在 Declaration 的 value 中使用的变量

Less:

@text-color: @gray-dark;

@link-color-hover: darken(@link-color, 10%);

Scss:

$text-color: $gray-dark;

$link-color-hover: darken($link-color, 10%);

在某个 Rule 中的一个 Declaration 的 value 中使用的变量

Less:

a:hover {

color: @link-color-hover;

}

Scss:

a:hover {

color: $link-color-hover;

}

转换 At-Rules 中的变量

Less:

@screen-sm: 768px;

@screen-sm-min: @screen-sm;

.form-inline {

// Kick in the inline

@media (min-width: @screen-sm-min) {

// Inline-block all the things for "inline"

.form-group {

display: inline-block;

margin-bottom: 0;

vertical-align: middle;

}

}

}

Scss:

$screen-sm: 768px;

$screen-sm-min: $screen-sm;

.form-inline {

// Kick in the inline

@media (min-width: $screen-sm-min) {

// Inline-block all the things for "inline"

.form-group {

display: inline-block;

margin-bottom: 0;

vertical-align: middle;

}

}

}

Variable Interpolation

转换选择器中的 variable interpolation

Less:

// Variables

@my-selector: banner;

// Usage

.@{my-selector} {

font-weight: bold;

line-height: 40px;

margin: 0 auto;

}

Scss:

// Variables

$my-selector: banner;

// Usage

.#{$my-selector} {

font-weight: bold;

line-height: 40px;

margin: 0 auto;

}

转换 Mixins

转换 Mixins 的定义(可以支持默认参数)

Less:

.alert-variant(@background; @border; @text-color) {

background-color: @background;

border-color: @border;

color: @text-color;

hr {

border-top-color: darken(@border, 5%);

}

.alert-link {

color: darken(@text-color, 10%);

}

}

Scss:

@mixin alert-variant($background, $border, $text-color) {

background-color: $background;

border-color: $border;

color: $text-color;

hr {

border-top-color: darken($border, 5%);

}

.alert-link {

color: darken($text-color, 10%);

}

}

转换 Mixins 的使用

Less:

.a {

.center-block;

}

Scss:

.a {

@include center-block;

}

支持 Mixins 的具有默认值的参数

Less:

@state-success-text: #3c763d;

@state-success-bg: #dff0d8;

@state-success-border: darken(spin(@state-success-bg, -10), 5%);

@state-info-text: #31708f;

@state-info-bg: #d9edf7;

@state-info-border: darken(spin(@state-info-bg, -10), 7%);

@state-warning-text: #8a6d3b;

@state-warning-bg: #fcf8e3;

@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);

@state-danger-text: #a94442;

@state-danger-bg: #f2dede;

@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);

.box-shadow(@shadow) {

-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1

box-shadow: @shadow;

}

.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {

// Color the label and help text

.help-block,

.control-label,

.radio,

.checkbox,

.radio-inline,

.checkbox-inline,

&.radio label,

&.checkbox label,

&.radio-inline label,

&.checkbox-inline label {

color: @text-color;

}

// Set the border and box shadow on specific inputs to match

.form-control {

border-color: @border-color;

.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work

&:focus {

border-color: darken(@border-color, 10%);

@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);

.box-shadow(@shadow);

}

}

// Set validation states also for addons

.input-group-addon {

color: @text-color;

border-color: @border-color;

background-color: @background-color;

}

// Optional feedback icon

.form-control-feedback {

color: @text-color;

}

}

// Feedback states

.has-success {

.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);

}

.has-warning {

.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);

}

.has-error {

.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);

}

Scss:

$state-success-text: #3c763d;

$state-success-bg: #dff0d8;

$state-success-border: darken(adjust_hue($state-success-bg, -10), 5%);

$state-info-text: #31708f;

$state-info-bg: #d9edf7;

$state-info-border: darken(adjust_hue($state-info-bg, -10), 7%);

$state-warning-text: #8a6d3b;

$state-warning-bg: #fcf8e3;

$state-warning-border: darken(adjust_hue($state-warning-bg, -10), 5%);

$state-danger-text: #a94442;

$state-danger-bg: #f2dede;

$state-danger-border: darken(adjust_hue($state-danger-bg, -10), 5%);

@mixin box-shadow($shadow) {

-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1

box-shadow: $shadow;

}

@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {

// Color the label and help text

.help-block,

.control-label,

.radio,

.checkbox,

.radio-inline,

.checkbox-inline,

&.radio label,

&.checkbox label,

&.radio-inline label,

&.checkbox-inline label {

color: $text-color;

}

// Set the border and box shadow on specific inputs to match

.form-control {

border-color: $border-color;

@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work

&:focus {

border-color: darken($border-color, 10%);

$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);

@include box-shadow($shadow);

}

}

// Set validation states also for addons

.input-group-addon {

color: $text-color;

border-color: $border-color;

background-color: $background-color;

}

// Optional feedback icon

.form-control-feedback {

color: $text-color;

}

}

// Feedback states

.has-success {

@include form-control-validation($state-success-text, $state-success-text, $state-success-bg);

}

.has-warning {

@include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);

}

.has-error {

@include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);

}

转换函数

字符串函数

转换 CSS 转义函数，也就是：~”xxx”

Less:

@input-border-focus: #66afe9;

.box-shadow(@shadow) {

-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1

box-shadow: @shadow;

}

.form-control-focus(@color: @input-border-focus) {

@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);

&:focus {

border-color: @color;

outline: 0;

.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");

}

}

.form-control {

.form-control-focus();

}

Scss:

$input-border-focus: #66afe9;

@mixin box-shadow($shadow) {

-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1

box-shadow: $shadow;

}

@mixin form-control-focus($color: $input-border-focus) {

$color-rgba: rgba(red($color), green($color), blue($color), .6);

&:focus {

border-color: $color;

outline: 0;

@include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba});

}

}

.form-control {

@include form-control-focus();

}

颜色函数

将 Less 的 spin() 函数转换为 Scss 的 adjust_hue() 函数

Less:

@state-success-border: darken(spin(@state-success-bg, -10), 5%);

Scss:

$state-success-border: darken(adjust_hue($state-success-bg, -10), 5%);

转换 @import At-Rules

Less:

@import "foo";

@import "foo.less";

@import "foo.php";

@import "foo.css";

Scss:

@import "foo";

@import "foo";

@import "foo";

@import "foo.css";

如果使用 postcss-less2scss 插件

const postcss = require('postcss')

const syntax = require('postcss-less')

const converter = require('postcss-less2scss')

const lessText = `

// Variables

@link-color: #428bca; // sea blue

@link-color-hover: darken(@link-color, 10%);

// Usage

a,

.link {

color: @link-color;

}

a:hover {

color: @link-color-hover;

}

.widget {

color: #fff;

background: @link-color;

}

`

const scssText = postcss([converter])

.process(lessText, { syntax })

.css

console.log('lessText = ', lessText, ', \nscssText = ', scssText)

和 gulp 集成

/**

* Use postcss-less2scss to convert bootstrap v3.3.7 styles from less to scss

*/

gulp.task('less2scss', () => {

return gulp.src('assets/less/bootstrap3/**/*.less')

.pipe(postcss([less2scss], {

syntax: less

}))

.pipe(rename(path => {

if (path.basename !== 'bootstrap') {

path.basename = '_' + path.basename

}

path.extname = '.scss'

}))

.pipe(gulp.dest('build/scss/bootstrap3/'))

})

相关

weixin_39850331
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Less和Scss
m0_68702564的博客
07-31 948
less和scss的基本介绍
在线less生成css,LESS 转 CSS
weixin_30166291的博客
08-04 934
Less 简介Less 是一门 CSS 预编译语言，它扩充了 CSS 语法，增加了诸如变量(Variable)、混合(Mixin)、运算(Operation)、函数(Function)等功能。 Less 既可以运行在服务器端(Node.js 和 Rhino 平台)也可以运行在客户端。Less 是建立在 CSS 之上的，其语法和 CSS 很像，因此很容易学习，下面是关于 Less 的核心概念和语法的...
style对象和less/scss互相转换，驼峰转中横线，支持嵌套转换
luck_lin
01-11 570
emotion style、Inline style对象和less/scss互相转换,支持格式化缩进，camelCase、kebab-case互相转换，支持嵌套。
.less文件转换为css文件
qq_52244923的博客
01-07 837
.less文件转换为css文件
Less 文件转 CSS 文件
最新发布
zz130428的博客
05-17 545
组件库，同一组件在不同平台的功能一致，但是样式有所不同，如果仍然使用上面的方式进行打包，显然很难满足不同平台对不同样式的需求，因此我开始调研相关的解决方案。发现在诸如 ant-design 这样的知名组件库中，React 组件的书写和样式的书写是分开的，用户在使用过程中，除了需要引入 React 组件之外，还需要统一引入打包好的 css 样式文件。到这里，其实基本上完成了我的需求，只需要将不同主题的各个样式文件统一到对应的入口 less 文件中，之后统一运行编译命令即可生成对应主题的 css 文件。
less和scss的基本使用以及相关应用实例
ace15824843202的博客
04-21 160
less和scss的基本使用以及相关应用实例
postcss-less2scss:PostCSS插件将Less转换为Scss
05-17
PostCSS Less2ssss 插件可将Less转换为SCSS。 转换变量 概述 变量-任何规则之外的声明 较少的： @link-color : #428bca ; Scss： $link-color : #428bca ; 变量-嵌套规则中的声明 较少的： #main { @width...
Less2SCSS:即时将Less转换为SCSS
05-31
"Less2SCSS:即时将Less转换为SCSS" 是一个工具或服务，它专注于将Less预处理器编写的样式代码实时转换为SCSS预处理器格式。Less和SCSS都是CSS预处理器，它们扩展了CSS的功能，允许开发者使用变量、嵌套规则、函数等...
sonar-css-plugin：SonarQube CSS SCSS Less Analyzer
01-29
SonarQube CSS / SCSS / Less Analyzer 免责声明 我不想继续维护此插件。 如果您想接管，请随时与我联系。 描述 此插件分析： 文件 HTML / XHTML文件中嵌入的代码 文件 文件 和： 计算指标：代码行，复杂性，规则...
rollup-plugin-postcss：Rollup和PostCSS之间的无缝集成
02-05
汇总插件帖子 和之间的无缝集成。 安装 yarn add postcss rollup-plugin-postcss --dev 用法 v2.0支持汇总v1或更高版本，但它会打印汇总v2中已弃用的警告。 重大变化： v3.0仅支持汇总v2，并且基于捆绑的提取路径...
sast：将CSS，Sass，SCSS和Less解析为一元语法树
02-05
ast 这是将CSS，Sass和SCSS解析为与兼容的抽象语法树（AST）的事情，这使得随后可以使用所有出色的进行搜索和操作。 大部分繁重的工作都是由完成的。安装用npm安装它： npm install --save sast用法您可以import或...
gulp-scss-to-less:gulp 插件将 scss 转换为 less
06-23
gulp-less-scss gulp 插件将较少的文件转换为 scss 文件 用法 var scssToLess = require ( 'gulp-scss-to-less' ) ; gulp . task ( 'scssToLess' , function ( ) { gulp . src ( 'themes/system/scss/*.scss' ) . pipe ( scssToLess ( ) ) . pipe ( gulp . dest ( 'themes/system/less' ) ) ; } ) ; 注意 此插件无法处理 'when' 语句。 执照 （麻省理工学院许可证）
less2sass, 一个小的脚本来转换到sass文件.zip
09-18
less2sass, 一个小的脚本来转换到sass文件 less2sass 将 LESS 转换为sass文件的小脚本注意：由于和sass的特性，它并没有完全完成完全的转换。 你必须做一些手工工作：- (安装npm install -g less2sass运行你可以在单个文件或者
实用网站——在线CSS转Sass/less
qq_43201350的博客
11-11 1083
在线CSS转Sass/less
sass和less的怎么转化为css,十分钟看懂Css、less和Sass（SCSS）的区别
weixin_35648005的博客
08-04 852
随着前端开发的不断发展，CSS也逐渐延伸出了很多新的语言，less和Sass就是其中两种，下面我们就一起来看看它们有何区别。背景CSS(层叠样式表)是一门非程序式语言，入门学习使用非常直观方便，但是对于一些比较复杂或者重用性比较强的项目来说，因为CSS没有变量、函数、SCOPE(作用域)，需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 C...
最简便的LESS格式转CSS格式！
yms869的博客
11-14 817
最简便的LESS格式转CSS格式！
less导出css文件的方法
d_agege的博客
04-18 2480
首先需要安装Easy less插件 less导出css文件的方法： 配置Easy less插件，实现所有Less有相同的导出路径 1.vscode中点击设置 2.输入Easy找到我们需要更改的配置，点击在settings.jion中编辑 3.在"less.compile"中添加一行代码 "out":"../css/" 这样我们的Less文件保存之后，css文件就可以保存到和less文件夹同级别的css文件夹之中了。 ...
css互相转换scss、css
会点php的前端小渣渣
06-16 874
sass to css：SassMeister | The Sass Playground!css to sass：css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
CSS详解：Sass、Scss、Css、Postcss的关系
andy_68147772的博客
11-28 693
SCSS（Sassy CSS）是SASS（Syntactically Awesome Stylesheets）的一个版本，它使用类似于CSS的语法，但增加了许多有用的特性，如变量、嵌套规则、混合（mixins）、函数、条件语句和循环等。总结来说，SASS和SCSS都是CSS的扩展，它们提供了更强大的编程特性，以便更高效地编写样式。（Sassy CSS）都是CSS预处理器，它们允许开发者使用更加动态和富有表现力的语法来编写样式表，然后再将其编译成普通的CSS，以便在网页中使用。
css、less、scss
06-09
CSS、LESS 和 SCSS 都是用于编写样式的语言，其中 CSS 是最基础的样式语言，而 LESS 和 SCSS 则是 CSS 的拓展语言，增加了更多的特性和功能。 CSS 是一种层叠样式表语言，用于描述网页中的元素应该如何显示。CSS 语言的语法简单，容易学习，但它的功能相对较为有限。 LESS 是一种 CSS 预处理器，它扩展了 CSS 的语法，使得样式表更加易于维护和扩展。LESS 在 CSS 的基础上增加了变量、嵌套、混合、函数等功能，可以减少代码的重复，提高开发效率。 SCSS 也是一种 CSS 预处理器，它与 LESS 类似，同样扩展了 CSS 的语法，但是它更接近于 CSS 的语法风格，因此学习成本相对较低。SCSS 也支持变量、嵌套、混合、函数等功能，可以让开发者更加方便地编写样式。 总的来说，LESS 和 SCSS 都是 CSS 的拓展语言，具有更多的功能和特性，可以提高开发效率，但也需要学习额外的语法和工具。选择使用哪种语言，可以根据具体的项目需求和个人喜好来进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值