PostCSS Less2scss
PostCSS plugin to convert Less to SCSS.
Convert Variables
Overview
- Variables - Declaration out of any rules
Less:
@link-color: #428bca;
Scss:
;
- Variables - Declaration inside nested rules
Less:
@width: 5em; width: @width;
Scss:
#main
- Variables - Reference as a single value or part of a value
Less:
@text-color: @gray-dark;@link-color-hover: darken@link-color, 10%;
Scss:
;;
- Variables - Reference as a single value or part of a value in nested rules
Less:
a:hover color: @link-color-hover;
Scss:
a:hover
- Convert variables inside At-Rules
Less:
@screen-sm: 768px;@screen-sm-min: @screen-sm; .form-inline // Kick in the inline min-width: @screen-sm-min // Inline-block all the things for "inline" .form-group display: inline-block; margin-bottom: 0; vertical-align: middle;
Scss:
;; .form-inline
Variable Interpolation
- Convert selectors
Less:
// Variables @my-selector: banner; // Usage .@my-selector font-weight: bold; line-height: 40px; margin: 0 auto;
Scss:
// Variables ; // Usage .#{$my-selector}
Mixins conversion
- Convert mixins definition
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:
- Convert mixins usage
Less:
.a .center-block;
Scss:
.a
- Support default value of parameters
Less:
@state-success-text: #3c763d;@state-success-bg: #dff0d8;@state-success-border: darkenspin@state-success-bg, -10, 5%; @state-info-text: #31708f;@state-info-bg: #d9edf7;@state-info-border: darkenspin@state-info-bg, -10, 7%; @state-warning-text: #8a6d3b;@state-warning-bg: #fcf8e3;@state-warning-border: darkenspin@state-warning-bg, -10, 5%; @state-danger-text: #a94442;@state-danger-bg: #f2dede;@state-danger-border: darkenspin@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: ; @background-color: // 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-shadowinset 0 1px 1px rgba0,0,0,.075; // Redeclare so transitions work &:focus border-color: darken@border-color, 10%; @shadow: inset 0 1px 1px rgba0,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:
;;; ;;; ;;; ;;; // Feedback states .has-success .has-warning .has-error
Convert Functions
String Functions
- Conver CSS escapting, i.e. ~"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: rgbared@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:
; .form-control
Color Functions
- Convert spin() to adjust_hue()
Less:
@state-success-border: darkenspin@state-success-bg, -10, 5%;
Scss:
;
@import At-Rules
Less:
"foo"; "foo.less"; "foo.php"; "foo.css";
Scss:
;;;;
Usage
const postcss = const syntax = const converter = const lessText = `// Variables@link-color: #428bca; // sea blue@link-color-hover: darken(@link-color, 10%); // Usagea,.link { color: @link-color;}a:hover { color: @link-color-hover;}.widget { color: #fff; background: @link-color;}`const scssText = cssconsole
integrate with gulp
/** * Use postcss-less2scss to convert bootstrap v3.3.7 styles from less to scss */gulp
See PostCSS docs for examples for your environment.