My understanding of reference is that it should only include the bits of the imported file it needs. Here it seems to be bringing in other parts?
Main file
.FadedGrid
{
#import (reference) './kendo.less';
.k-grid-header th
{
background-color: #input-background-color;
}
}
kendo.less file
#input-background-color: #000;
/* Nothing from here is used*/
#import "theme.less";
theme.less file
.UnrelatedRule
{
background-color: #000;
}
output
.FadedGrid .UnrelatedRule {
background-color: #000;
}
.FadedGrid .k-grid-header th {
background-color: #000000;
}
Why is UnrelatedRule in there? NB It doesn't make a difference if I change it to
#import (reference) "theme.less";
Related
I'd like to write a plugin that can generate a LESS function named alt that can do the following transformation:
.button {
background-color: alt(red, blue);
color: alt(black, white);
}
And output the following:
.button {
background-color: red;
color: black;
body.alt & {
background-color: blue;
color: white;
}
}
There doesn't seem to be much documentation about writing LESS plugins on the site, so hoping someone can provide an example of how this might be written :) Thanks!
I think a mixin would be best for this. Something like the following LESS:
.alt(#property, #primary-color, #alternate-color) {
#{property}: #primary-color;
body.alt & {
#{property}: #alternate-color;
}
}
.button {
.alt(background-color, red, blue);
.alt(color, black, white);
}
Which will compile to the following CSS:
.button {
background-color: red;
color: black;
}
body.alt .button {
background-color: blue;
}
body.alt .button {
color: white;
}
I like to use :extend() in Less like I can do it in Sass.
Example in SCSS: http://codepen.io/Grawl/pen/qEeQPG
Example in Less: http://codepen.io/Grawl/pen/qEeQpz (not worked)
Expected output:
.datalist-item {
display: block;
}
.datalist-item-term {
font-weight: normal;
}
.datalist-item-description {
font-weight: bold;
}
.datalist-float .datalist-item {
display: inline-block;
}
.datalist-float .datalist-item:not(:last-of-type) {
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid;
}
The purpose is to not self-repeat, so if I rename one class in Sass I have not to rename others.
I know I can put root class in a variable and use it twice with it http://codepen.io/Grawl/pen/qEeQpz but it looks ugly :(
Your Sass (SCSS) example uses #extend-Only Selectors which is some special form of extending which does not exists in Less.
Firstly a "normal" extend:
SCSS:
.class {
p: 1;
}
.class2 {
#extend .class;
}
and Less:
.class {
p: 1;
}
.class2 {
&:extend(.class);
}
both compile into:
.class,
.class2 {
p: 1;
}
In Less .class2 { &:extend(.class); } can also be written as .class2:extend(.class1){}
Now consider the following SCSS code which uses #extend-Only Selectors:
%class {
p: 1;
}
.class2 {
#extend %class;
}
The preceding code compile into CSS code as follows:
.class2 {
p: 1; }
Sass documentation tells you:
#extend-Only Selectors
Sometimes you’ll write styles for a class that you only ever want to
#extend, and never want to use directly in your HTML. This is
especially true when writing a Sass library, where you may provide
styles for users to #extend if they need and ignore if they don’t.
If you use normal classes for this, you end up creating a lot of extra
CSS when the stylesheets are generated, and run the risk of colliding
with other classes that are being used in the HTML. That’s why Sass
supports “placeholder selectors” (for example, %foo).
Placeholder selectors look like class and id selectors, except the #
or . is replaced by %. They can be used anywhere a class or id could,
and on their own they prevent rulesets from being rendered to CSS.
In Less you will have two options to have code that does not generate output:
1) use a mixin, mixins do not generate output:
.class() {
p: 1;
}
.class2 {
.class();
}
outputs:
.class2 {
p: 1;
}
2) put your classes which should not output in a different file and import this file with the reference kewyword:
file1.less:
.class {
p: 1;
}
file2.less:
#import (reference) "file1";
.class2 {
&:extend(.class);
}
lessc file2.less will output now:
.class2 {
p: 1;
}
But i agree with #seven-phases-max in the comments in the first place. In your example there is no need to use extend. #seven-phases-max shows you some examples to solve this use case. Alternatively you can consider; changing selector order with parent reference, which should work in both Less and SASS:
.datalist-item {
display: block;
&-term {
font-weight: normal;
}
&-description {
font-weight: bold;
}
.datalist-float & {
display: inline-block;
&:not(:last-of-type) {
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid;
}
}
}
Compile into:
.datalist-item {
display: block;
}
.datalist-item-term {
font-weight: normal;
}
.datalist-item-description {
font-weight: bold;
}
.datalist-float .datalist-item {
display: inline-block;
}
.datalist-float .datalist-item:not(:last-of-type) {
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid;
}
Finally notice that you are using nesting of properties such as:
border: {
right: 1px solid;
};
which should compile into:
border-right {
1px solid;
}
Less does NOT support nesting of properties.
Main file
#import (reference) './kendo1.less';
.FadedGrid
{
#import (reference) './kendo2.less';
}
.FadedGrid
{
#import (reference) './kendo2.less';
.k-grid-header th
{
background-color: #input-background-color;
}
}
kendo1.less
#input-background-color: #000;
kendo2.less
#input-background-color: #fff;
This produces
.FadedGrid .k-grid-header th {
background-color: #000000;
}
But the colour here should be #ffffff, not #000000
You need to change you import from reference to multiple. If you set it to reference it seems to ignore the duplicate imports of the same file.
Import options: http://lesscss.org/features/#import-options
Example:
#import (reference) './kendo1.less';
.FadedGrid
{
#import (multiple) './kendo2.less';
}
.FadedGrid
{
#import (multiple) './kendo2.less';
.k-grid-header th
{
background-color: #input-background-color;
}
}
Output:
/* Generated by less 2.4.0 */
.FadedGrid .k-grid-header th {
background-color: #ffffff;
}
This seems to be a saas/scss related issue. I am trying to include some scss code from the example files in Touch 2.3 on Windows 7 to get the 'first time screen'. This is from the sample touchtomatoes app (touch-2.3.0\examples\touchtomatoes\resources\sass).
The scss files in question are as follows:
_welcomeOverlay.scss :
.x-ie .welcomeOverlay.x-panel, .x-android-2 .welcomeOverlay.x-panel {
background-color: rgba(0,0,0,.5);
}
.welcomeOverlay.x-panel {
#include background-image(radial-gradient(center, ellipse cover, rgba(0,0,0,0.7), rgba(0,0,0,0.9)));
background-color: transparent;
.x-innerhtml {
#include st-box;
#include st-box-orient(vertical);
#include st-box-align(center);
#include st-box-pack(center);
height: 100%;
color: white;
.message {
#include st-box;
#include st-box-orient(vertical);
#include st-box-align(center);
#include st-box-pack(center);
#include text-shadow(1px 1px 0px rgba(0,0,0,.7));
#include query-medium {
font-size: 2em;
}
#include query-large {
font-size: 2.2em;
}
#include query-small-landscape {
font-size: .8em;
}
h2 {
text-align: center;
font-weight: 300;
font-size: 1.2em;
padding-bottom:15px;
color: #41942e;
em {
display: block;
color: #125B8F;
font-weight: 800;
font-size: 1.6em;
}
}
p{
text-align: center;
font-weight: 600;
max-width: 75%;
}
}
.tap {
padding-top:30px;
font-weight: 100px;
font-size: .8em;
}
}
}
_media-queries.scss:
#mixin query-small {
#media screen and (max-width: 480px){
#content;
}
}
#mixin query-small-landscape {
#media screen and (orientation: landscape) and (max-height: 480px){
#content;
}
}
#mixin query-medium {
#media screen and (min-width:481px) and (max-width: 1024px){
#content;
}
}
#mixin query-large {
#media only screen and (min-width: 1024px) {
#content;
}
}
app.scss:
#import "compass/css3";
#import "media-queries";
// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
#import "welcomeOverlay";
#include icon-font('Pictos', inline-font-files('pictos/pictos-web.woff', woff, 'pictos/pictos-web.ttf', truetype,'pictos/pictos-web.svg', svg));
// Custom code goes here..
// Examples of using the icon mixin:
// #include icon('user');
.tr_select_field_config
{
font-size:5em !important;
color:red;
font-color: blue !important;
}
.result_list_cfg
{
font-size:0.8em !important;
color:red;
}
.no_prod_found_parameters
{
font-size:0.75em !important;
color:red;
}
.no_prod_found_label_text
{
font-size:0.9em !important;
color:red !important;
}
.home_page_list_text
{
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #0000FF;
background-color:red;
}
.dist_list
{
font-size:0.9em !important;
//color:red !important;
}
//#include pictos-iconmask('mail');
#include icon('mail');
//Import Sencha SAAS
#import "media-queries";
#import "welcomeOverlay";
//New buton color
#include sencha-button-ui('trblue', #0067B0, 'glossy');
//Adding class(es) for list options for users (page 1)
//#include icon('search_black');
//#include icon('refresh5');
//#include icon('globe1');
//#include icon('tabbed_book');
//#include icon('phone');
//#include icon('mail');
//#include icon('globe1');
.userCls:after {
font-family: "Pictos";
content: "s";
//content: "⇝";
//icon: "mail";
font-size: 1.5 em;
}
//End of class(es) for list options
Now when I build my app (sencha app build testing) I get the following error:
[INF] executing compass using system installed ruby runtime
Sass::SyntaxError on line ["24"] of C: Invalid CSS after "...de query-medium": expected "}", was "{"
Run with --trace to see the full backtrace
error app.scss (Line 24 of _welcomeOverlay.scss: Invalid CSS after "...de query-medium": expected "}", was "{")
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExProcess: compass process exited with non-zero code
: 1
[ERR]
[ERR] Total time: 21 seconds
Now if I comment the following lines (in _welcomeOverlay.scss), the build goes through well :
#include query-medium{
font-size: 2em;
}
#include query-large {
font-size: 2.2em;
}
#include query-small-landscape {
font-size: .8em;
}
I am new to sass, can anyone help with this please ?
Ravi
I have a mixin that accepts an argument that I want to pass into a variable.
#mixin my_mixin($arg) {
background-color: $state-#{$arg}-text;
}
Interpolation of variable names is currently not possible in SASS. Here is the issue that discusses.
However, you may use interpolation of placeholders:
%my-dark-styles {
background-color: #000;
}
%my-white-styles {
background-color: #FFF;
}
#mixin my_mixin($arg) {
#extend %my-#{$arg}-styles;
}
.header {
#include my_mixin("dark");
}
.footer {
#include my_mixin("white");
}
This compiles to:
.header {
background-color: #000;
}
.footer {
background-color: #FFF;
}
Since Sass 3.3 you can use maps also https://sass-lang.com/blog/sass-33-is-released
Here is an example:
$state-light-text : #FFFFFF;
$state-dark-text : #000000;
$color-map: ( //create a array to support the two colors light and dark
light: $state-light-text,
dark: $state-dark-text
);
#each $color-key, $color-var in $color-map {
.myclass--#{$color-key} { //will generate .myclass--light .myclass--dark
background-color: $color-var; // equal $state-light-text or $state-dark-text
}
}
It will compile into:
.myclass--light {
background-color: #FFFFFF;
}
.myclass--dark {
background-color: #000000;
}