Problems with less mix-ins - css

I'm trying to do (I think) a really simple mixin in LESS, and I'm not sure what's going wrong here.
I'm compiling with Visual Studio Web Essentials.
So here's my goal:
I want a style that is just like the boostrap control-label, except I want to change some property (let's say padding):
Here's my LESS:
#import (reference) 'bootstrap/bootstrap.less';
.my-test-class {
.control-label;
padding: 4;
}
This results in a compile error:
NameError: .control-label is undefined.
What am I doing wrong here?

As far as I can tell, all the .control-label class definitions reside within other class definitions in this file. Specifically, inside either .form-inline and .form-horizontal. However within .form-inline it is also inside a media query, which at present prevents it from being accessed as a mixin.
So that means you must access it via the only namespace available, like so:
#import (reference) 'bootstrap/bootstrap.less';
.my-test-class {
.form-horizontal > .control-label;
padding: 4;
}
The general principle to learn from this is one really needs to be aware of what the bootstrap code actually outputs to be able to access (or know whether you can even access) a piece of it as a mixin (whether importing it as (reference) or not).

Related

Rewriting CSS to SASS problem: same class definition in two css files

I've been assigned to rewrite an existing CSS code into SASS. This is my first experience with SASS, still a beginner.
So, first thing that I started with, I merged all css files into single file. Now I'm going through it and try to separate things into different .scss files.
I have layouted my SASS folder's architecture according to "7-1" pattern, which consists of 7 folders: abstracts, base, layout, modules, pages, themes and vendors. So far so good.
In process of separating my CSS into different files I came across a problem that I couldn't find answers to on google:
Say I have 2 CSS files - main.css and admin.css. There is defined a class in main.css:
.first-line {
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
}
and a class with the same name is defined in admin.css
.first-line {
padding-left:15x;
padding-right:10px;
}
As I understood from SASS tutorials online (correct me if I'm wrong), SASS code should result in only one main.scss where I import all particles, modules etc. and it get's compiled to single main.css file. If so, how do I solve a problem like this, where I need a class to be defined differently only for a single page?
Try to nest that .first-line class in both the files (parent would be diff while nesting) ..... so while compiling into single file, it wont cause a problem
If it is a single-page application, that means you have JavaScript in use.
You can simply define a unique class for each page and assign this class to either body or html element (I prefer the latter one), and in run time you can simply set the page class dynamically. This way, you can define the first-line class and set the default values and put it into a shared .scss file and then overwrite the existing attributes or add new ones to that class for each individual page as needed.
E.g., you might want to structure it like this.:
pages/common.scss:
first-line {
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
}
main.scss:
html {
import 'pages/common';
&.admin {
#import 'pages/admin';
}
&.other-page {
#import 'pages/other-page';
}
}

Sass #extend behavior like LESS and #import

I have just migrated from LESS to SASS/SCSS, because of most advice I've found on the net and new version of bootstrap.
But I am really missing one important feature of LESS that every class style can be treated as an mixin.
.social-icons__list {
.list-inline;
}
The problem is that I cannot use #include for simple class, it should be annotated with #mixin. And in case of placeholderI need also to annotate class with %.
But like in my case, I need to extend existing class and get behavior like using placeholder.
In case of SASS it generates following CSS
.list-inline, .social-icons__list {
padding-left: 0;
list-style: none;
margin-left: -5px; }
But I need to copy styles only
.social-icons__list {
padding-left: 0;
list-style: none;
margin-left: -5px; }
I would accept it, but I also had to download bootstrap sass sources and #import "../external-dependency/bootstrap-sass-3.3.7/assets/stylesheets/bootstrap";
And this line of code makes compiler to copy all styles from bootstrap sources into my compiled file.
So maybe there are solutions to these problems.
I would be grateful for any help.
Sass doesn't have class-as-mixin feature like Less. You only real option is #extend though, it's worth nothing the differences in how this behaves, that it hoists the class name to the class that you are #extend-ing.
The bootstrap issue is a separate one, as if you wanted to use BS classes as less mixins you would still need them in your compiled file. The best strategy for that is use the official bootstrap sass only import the parts you are using. There are also #mixins defined for most styles/components so you can just import the mixins files and use those if you don't want any actual classes.

Jasny-Bootstrap using ".offcanvas-sm" in lessfile

I would like to use .offcanvas-sm which is assigned to an <nav> element into the Less file. The Less file looks like:
#import "../../jasny-bootstrap.less";
.test {
.offcanvas-sm;
}
Problem is that the Less processor says - class offcanvas-sm doesn't exist. Its from this "https://github.com/jasny/bootstrap/blob/master/less/offcanvas.less" Less file included in "jasny-bootstrap.less". But how can I import this code to a class?
The compiler is correct there, indeed .offcanvas-sm does not exist in the context you try to invoke it. The key word here is Scope: selectors defined in a media query can be used as a mixin only within this same media query block.
For this particular case extend will do the trick. Scope handling of the extend is somewhat orthogonal to that of mixins, so selectors defined within media query blocks are open for "extending" from an outer scope (but not in opposite):
.test {
&:extend(.offcanvas-sm all);
}
Or just:
.test:extend(.offcanvas-sm all) {
}
---
all keyword is necessary in this case since .offcanvas-sm style is actually a set of two rulesets: .offcanvas-sm and .offcanvas-sm.in

Using less.css and Twitter Bootstrap 3 - mixins not working

Alrighty, so I am trying to add classes to my page via css. Below is an example of the less.css file I am writing:
.someClass {
.col-sm-6;
}
I swear this worked before, but for whatever reason, my compiler throws an error:
".col-sm-6 is undefined"
Compiler: WinLess
Essentially I'm just trying to assign the col-sm-6 class to a div for width/float etc... Please let me know if you can think of any reasons this wouldn't work.
Thanks!
Bootstrap 3 makes these class names via a dynamic mixin, so they are not directly accessible as mixins themselves (dynamically generated class names are not currently able in LESS to be accessed as mixins). Instead, you need to call the mixin to generate the code by doing this:
.someClass {
.make-sm-column(6);
}

manipulate 3rd party *.less css without hacking it

In a Meteor (nodejs) project we use the less CSS preprocessor, and we use 3rd party "bootstrap-full.less" for our css styling.
There is one (maybe more) CSS rule in bootstrap that I would like to nuke, because it conditionally overrides other rules. (details below)
However, I don't want to "hack" the original bootstrap file, cause that is "vendor code".
I know I could re-override the CSS rules, but this is more work and hassle.
So the question is:
Is it possible to manipulate/process the parsed css rules in less before the actual css is generated?
In particular, there is this rule here,
#media (max-width: 767px) {
...
// Make all grid-sized elements block level again
[class*="span"],
.row-fluid [class*="span"] {
float: none;
display: block;
width: auto;
margin-left: 0;
}
which is undesirable in my case, because we only have this on a sidebar, that keeps the same width even on mobile. So it should continue to behave like a table with cells (span1, span2 etc) being floated.
Ok, maybe I will figure out a different solution for my CSS / bootstrap problem, but still it would be interesting to know if less allows me to manipulate the css it produces.
What I've done in my project is create a master .less file and within that file import my third party less files and then following that my custom files. Any classes that you want to update, create a dupe .less file with that class in it in your own directory and then simply edit the properties you want to change in your files. So for example:
master.less
#import "/static/bootstrap/less/bootstrap.less";
// My custom files
#import "scaffolding.less";
#import "type.less";
And then you have your own file called
type.less
h6{
color: #myCustomColor;
}
This way you keep all the bootstrap files intact and only overwrite what you need to. It also keeps the files nicely seperated so it's easy to navigate and also a snap if you ever need to update the bootstrap source.

Resources