精华内容
下载资源
问答
  • 插件可将Less转换为SCSS。 转换变量 概述 变量-任何规则之外的声明 较少的: @link-color : #428bca ; Scss: $link-color : #428bca ; 变量-嵌套规则中的声明 较少的: #main { @width : 5 em ; width :...
  • css转换less_如何CSS转换为LESS

    千次阅读 2020-06-14 08:28:35
    我们在以前的文章中介绍了LESS的许多基本... 我们还提到了如何使用应用程序或编译器将LESS转换为常规CSS 。 但是,我们该如何做相反的事情; 将CSS转换为LESS? 好吧,这个技巧是给你的。 使用工具 随着CSS预...

    之前的文章中 ,我们介绍了LESS的许多基本知识。 如果你一直关注我们的LESS系列中,我们认为,在这一点上,你已经有关于如何使用是个好主意变量 混入操作LESS

    我们还提到了如何使用应用程序或编译器将LESS转换为常规CSS 。 但是,我们该如何做相反的事情; 将CSS转换为LESS? 好吧,这个技巧是给你的。

    使用工具

    随着CSS预处理器的日益普及,一些旨在使Web设计人员或开发人员的生活更轻松的新工具和应用程序,例如CSS2Less

    该工具使我们可以将常规CSS转换为LESS。 因此,让我们尝试一下。 我的旧文件中有以下CSS规则要转换。

    nav {
    	height: 40px;
    	width: 100%;
    	background: #000;
    	border-bottom: 2px solid #fff;
    }
    nav ul {
    	padding: 0;
    	margin: 0 auto;
    }
    nav li {
    	display: inline;
    	float: left;
    }
    nav a {
    	color: #fff;
    	display: inline-block;
    	width: 100px;
    	text-shadow: 1px 1px 0px #000;
    }
    nav li a {
    	border-right: 1px solid #fff;
    	box-sizing:border-box;
    }
    nav li:last-child a {
    	border-right: 0;
    }
    nav a:hover, nav a:active {
    	background-color: #fff;
    }

    这是结果。

    nav a:hover, nav a:active {
        background-color: #fff;
    }
    nav {
        height: 40px;
        width: 100%;
        background: #000;
        border-bottom: 2px solid #fff;
        a {
            color: #fff;
            display: inline-block;
            width: 100px;
            text-shadow: 1px 1px 0px #000;
        }
        ul {
            padding: 0;
            margin: 0 auto;
        }
        li:last-child {
            a {
                border-right: 0;
            }
        }
        li {
            display: inline;
            float: left;
            a {
                border-right: 1px solid #fff;
                box-sizing:border-box;
            }
        }
    }

    如上所示,我们的旧CSS现在像在LESS中一样嵌套。

    局限性

    但是,我们还可以看到转换结果中的一些限制。 在旧CSS中,我们有几种相同的颜色,例如在这两个声明border-bottom: 2px solid #fff;border-right: 1px solid #fff; 我们两个边界都是白色的。 在LESS中,我们实际上可以将此常量存储在Variable中

    它也不会窝和分离伪*与符号(&)符号,如下面的规则li:last-childnav a:hover, nav a:active 。 它们只是保持原样,我们实际上可以通过这种方式简化规则集。

    li {
    	&:first-child {
    
    	}
    	a {
    		&:hover {
    
    		}
    		&:active {
    
    		}
    	}
    }

    结论

    尽管目前仍存在局限性,但此工具在节省嵌套CSS规则集的时间方面非常有帮助。 我们只需要手动完成其余的工作即可; 直到上述限制得到解决为止。


    翻译自: https://www.hongkiat.com/blog/css-to-less/

    展开全文
  • Grunt 任务 LESS 转换为 SCSS、CSS 和 Stylus, SCSS 转换为 LESS、Stylus 和 CSS,并 Stylus 转换为 SCSS、LESSCSS ##安装 $ npm install --save-dev grunt-scss-less-stylus-css ##用法 require...
  • 发布一个 PostCSS 插件:postcss-less2scss,可以 Less 文件转换为 Scss。* GitHub:https://www.npmjs.com/package/postcss-less2scss* NPM:https://www.npmjs.com/package/postcss-less2scss转换变量转换变量的...

    发布一个 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/'))

    })

    相关

    展开全文
  • 此函数与grunt-contrib-less包一起使用.格式与通常较少的函数格式略有不同.请注意,您需要在此包中插入less作为参数.em: function(less,fontsize,basefontsize){if (less.functions.functionRegistry.get('is...

    使用LESS,您可以构建自己的功能.我将此函数与grunt-contrib-less包一起使用.格式与通常较少的函数格式略有不同.请注意,您需要在此包中插入less作为参数.

    em: function(less,fontsize,basefontsize){

    if (less.functions.functionRegistry.get('ispixel')){

    basefontsize = (basefontsize) ? basefontsize.value : 16

    return fontsize.value/basefontsize+'em';

    }

    }

    现在你可以在你的LESS样式表中调用这个函数

    .class{

    font-size:em(16px);

    }

    哪个会编译到

    .class{

    font-size:1em;

    }

    注意ems仍然是相对于容器的css.因此,如果换行div的字体大小设置为0.8em,则1em的字体大小不会是16px.

    更新:非grunt-contrib-less版本

    如果您将此文件放在javascript文件中,该文件包含在较少文件之前的html中,则可以使用上述功能.

    $.extend(less.functions,{

    em: function(fontsize,basefontsize){

    if (this.ispixel(fontsize)){

    basefontsize = (basefontsize) ? basefontsize.value : 16

    return new(tree.Dimension)(fontsize.value/basefontsize,'em');

    }

    }

    }

    展开全文
  • 一、环境依赖 具备NodeJs环境,只要版本不过低都可以 二、安装模块 //注意这里安装了两个模块,并且安装在全局目录下 //安装完less后就拥有了lessc...lessc ./base.less ./demo.css --clean-css="advanced" ...

    一、环境依赖

    具备NodeJs环境,只要版本不过低都可以

    二、安装模块

    //注意这里安装了两个模块,并且安装在全局目录下
    //安装完less后就拥有了lessc命令
    npm install less less-plugin-clean-css -g

    三、使用

    lessc ./base.less ./demo.css --clean-css="advanced"

     

    展开全文
  • ),下载后需要编译转换less文件拖入到该软件中即可,refresh一下,之后只要在后台运行着koala工具,那么修改了less文件保存就会直接内容更新到编译后的css中。 方法三: 现在项目中最常用的应该是gulp了吧...
  • variable.less 转换为 bootstrap css 框架的 config.json 文件。 这个想法是加载 variables.less 文件并其转换为可在上传的 config.json 文件 兑换 Web 服务器(仅限本地使用) 启动它 ...
  • Less2SCSS 即时将Less转换为SCSS
  • Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量...之后在 webpack 打包的过程中,使用 ['style-loader', 'css-loader', 'less-loader'] 这样的形式, less 资源直接打包到 js 文件中。最近由于项目的...
  • 将less文件转换css文件

    千次阅读 2017-10-15 18:59:10
    最近这俩年都是采用less来写样式,但最近换工作了,该公司还是...新建项目就不说了,安装下全局的lessnpm install -g less然后执行下命令,就是将less文件夹下test.less的内容 翻译到css文件夹下的test.css中lessc l
  • less文件转换为css文件

    2019-10-04 22:21:54
    本文主要介绍less文件如何转化为css文件。 1.首先,你要确认你的电脑已经安装了node。 使用 npm 安装 lessc,命令行: npm install -g less 2.然后,进入需要转换less文件的目标位置。 ...
  • 这个小助手您的 .less 文件转换为 .css 而不依赖于 Node.js 或客户端解析。 一切都在服务器上编译,缓存,并通过 PHP 作为常规 css 提供。 安装 获取文件 Git子模块 如果您已经在使用 Git 开发应用程序,则可以...
  • 新手如何将less文件转换css文件

    万次阅读 2017-02-06 23:07:04
    less是预处理css,使我们写css更方便...下面是如何将less文件转换css文件: Less官网:http://lesscss.org/ Less中文网:(结合以下两个网站看)http://lesscss.cn/(推荐看这个网站,但翻译不完整) http://less.
  • LESS转换css

    2018-08-21 13:54:00
    本文主要介绍less文件如何转化为css文件。 1、首先确认你的电脑已经安装了node。 查看node版本号输入:node -v查看npm版本号输入:npm -v 若没有安装node请先安装好node环境再来 2、使用 npm 安装...
  • lessc 转换less为css

    千次下载 热门讨论 2014-07-05 00:31:05
    Less2Css插件依赖lessc这个工具,下载这个压缩包,然后解压后,路径添加到系统环境Path变量中,若在cmd中,输入lessc,不报错,则表示设置成功
  • 方法一: 此方法,一定要在服务器环境下访问,才会生效。 http://files.cnblogs.com/files/shimily/less.js ... 方法二: ...在线编辑器进行less转换css http://tool.oschina.net/less 三:...
  • 无postcss-less的最常见用法是PostCSS转换直接应用于LESS源。 例如。 以LESS编写的ia主题,该主题使用添加适当的供应商前缀。 const syntax = require ( 'postcss-less' ) ; postcss ( plugins ) . process ( ...
  • 插件可将CSS类智能地转换为SASS,Less和Stylus mixins。 安装 npm install postcss-classes-to-mixins 例子 输入: /* style.css */ . red-btn { background : red; color : white; } 输出: /* style.scss */ ...
  • less文件批量转换为css

    2019-03-24 20:54:00
    1 import os ... 3 def auto_less_to_css(file_dir): 4 # 获取当前目录下所有的css文件路径 5 all_whole_path_files = [] 6 for root, dirs, files in os.walk(file_dir): 7 for file in file...
  • less-loader, web pack的LESS 加载程序 LESS 编译为 CSS 加载器 LESS 编译为 CSS 。Use css加载程序或者原始加载程序转换为一个JS模块,并它的提取为一个单独的文件。安装npm install --save-dev le
  • Less 简介Less 是一门 CSS 预编译语言,它扩充了 CSS 语法,增加了诸如变量(Variable)、混合(Mixin)、运算(Operation)、函数(Function)等功能。 Less 既可以运行在服务器端(Node.js 和 Rhino 平台)也可以运行在...
  • 批量转换lesscss

    2018-05-10 20:04:44
    安装了less之后后, 可以通过lessc 单个.less文件转换为.css, 但less没有提供批量转换为css的命令, 如果不使用sublime, 或者webstorm提供的插件, 就得手动一个一个去转换 懒是第一生产力, 我用python写了一个批量...
  • less中使用grid布局 CSS网格列被转换为不同的值 使用grid布局通常会使用 ‘/’ 符号 但是 直接使用会导致 最终转义的css属性值 为数于数相处的结果 解决方案 grid-area: ~"2/2/3/3"; // 属性前后分别用该写法代替...
  • css预处理Less

    2018-06-04 14:36:01
    Less其实就是css预处理器,简单的说,就是动态编写cssLess用法 首先以vue中开发例,先安装lessless-loader npm install less less-loader 1.变量 1.变量值定义 格式: @变量名 @width:100...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,699
精华内容 8,279
关键字:

css如何将less转换为