I need to include css from external recourse into my result css. I use LESS preprocessor.
Is there the way to do this? For example,
.wrapper {
#import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}
But that's not working for me. I get the same css:
.wrapper {
#import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}
I want it to be:
.wrapper .hljs-comment {
color: #687d68;
}
.wrapper .hljs-variable,
.wrapper .hljs-attribute,
/* etc. */
CSS files are imported by leaving the #import directive as-is. If you want a CSS file to be treated as a LESS file (that is, inlined and namespaced) you should use #import (less):
.wrapper {
#import (less) 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}
You should be aware that the file will be downloaded every time the less file gets compiled, so compilation performance is less than optimal.
Related
I'm doing media queries in a seperate scss file named _media.scss, so I can seperate my main style.scss file from the media queries to make things easier to manage.
However it seems that because i import the _media.scss file at the top of the style.scss file then because of the nature of the cascading rules, the style.scss rules are overriding the _media rules as they come after the import.
To get the _media rules to take priority i'm having to add on !important to a lot of rules. I tried cutting and pasting all the media queries to the bottom of the style.scss file and it works without the !important flag.
Is there any way to give the _media partial priority over the style file so I fix this?
Code:
Inside the style.scss file:
#import 'config';
#import 'utilities';
#import 'form';
#import 'dropdown';
#import 'animations';
#import 'media';
.logo {
font-size: 2em;
}
Inside the _media.scss:
#media(max-width: 500px) {
.logo {
font-size: 1.5em;
}
}
Inside the chrome dev tools, i've got the same classes as above with font-size: 1.5em crossed out.
Not sure why 2em is taking priority?
I am relatively new to programming and markup languages.
Is there a way to add classes in less from an external css file?
/* this is in a single less file */
.foo {
color: blue;
}
h1 {
.foo; /* works just fine and turns my h1 html tag blue*/
}
/* now if want to add (for examlpe) a bootstrap class in my less file like so*/
#import "bootstrap.css"; /*it is in the same folder as my less file */
h1 {
.text-danger; /*throws an error */
}
This should make my h1 tag red, as I imported the bootstrap.css file.
Now I tried this with creating my own css file and import that to my less file and do the same thing but it doesn't work either.
What am i doing wrong?
Is there a postcss solution for importing a file into / nesting inside a selector? I can't get postcss-import or postcss-nested to do what I'm after.
.some-selector {
#import 'some.css';
}
Given a file e.g. import-me.css containing
div {
color: red;
}
I'd like to process entry.css
.some-class {
#import 'import-me.css';
}
And see the output
.some-class div {
color: red;
}
Thanks!
UPDATE: for the trivial example, you can bodge it by using postcss-nested-import AND postcss-nested but this has a couple of drawbacks because (a) postcss-nested-import paths are relative to the script running it, whereas css convention is that imports should be relative to the calling file (b) the maintainer has abandoned it https://github.com/eriklharper/postcss-nested-import/issues/2 <--- this issue in turn references https://github.com/postcss/postcss-import/issues/214 which is a dead thread :-(
postcss-partial-import seems to do the trick.
https://github.com/jonathantneal/postcss-partial-import
I'm trying to import some classes from a CSS file like bootstrap.css to my site.scss SASS file, not all of them. The problem with following code is that I get all bootstrap classes in my compiled site.css file:
site.scss
#import "bootstrap";
.my-div-md-6
{
/*some other styles*/
#extend .col-md-6;
}
On the other hand, It is possible to do this with LESS by importing bootstrap.css as reference using this code:
site.less
#import (less, reference) "bootstrap.css";
.my-div-md-6{
/*some other styles*/
&:extend(.col-md-6);
}
The compiled output of LESS is very light as below:
site.css
.my-div-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 992px) {
.my-div-md-6 {
float: left;
}
.my-div-md-6 {
width: 50%;
}
}
.my-div-md-6 {
/*some other styles*/
}
Is it possible to achieve this with SASS? If yes, giving a quick example would help.
Unfortunately, there is not simple answer and at the time of writing this, Ruby Sass does not natively support the LESS import (reference) feature.
TLDR; Suggestions:
use uncss or postcss to remove the compiled css from file before finalising stylesheet.
if you can, use mixins and placeholder classes as a rewrite of the scss file, but this is the MOST time consuming.
import "file" as partial such that file="_file.scss" and #extend .class if you absolutely have to, (manual method but suppose it'll work)
UNCSS
You can use uncss as a package from npm to remove the compiled css (I know this isn't efficient, but if you had to use SASS), then you'd remove the chaff that's generated from the example bootstrap import.
HOW?
QUOTE: SO-Answer-Joesph
How? The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
Used stylesheets are extracted from the resulting HTML.
The stylesheets are concatenated and the rules are parsed by css-parse.
document.querySelector filters out selectors that are not found in the HTML files.
The remaining rules are converted back to CSS.
So yes, it removes selectors not in the DOM at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */ before them, e.g...
MAKE SURE YOU ADD THE MEDIA OPTION IN UNCSS
REF: SO-Answer-Deksden
SASS Background research:
Summarising above:
nex3: one of the core leads for sass, has been at google and working on dart. They released dart-sass (unstable release) as a rewrite in favour to replace and improve upon ruby sass. This is interesting as this rewrite also explains the lack of feature development in Ruby Sass as well as the need for a rewrite. Since a core contributor of a ruby sass port: i.e. libsass (C++ implementation of ruby-sass) left the libsass team, it brings a further impetus to improve on sass performance.
Credit:
Joesph
Deksden
I wanted to use twitter bootstrap CSS only in a specific element in my web page.
I tried to do it like in code below. But after compiling this to a css file nothing was outputted. If I moved #import outside #my_div then I got all css definitions for twitter boostrap.
#my_div {
#import "../twitter_bootstrap/lib/bootstrap.less";
}
How can I namespace a less css file?
I am not using less on the live site, nor am I manually doing the compiling so this is kind of a "simple" version. It's not as automated as the others but may apply to some users.
Edit bootstrap.css / bootstrap-responsive.css
.tb {
// copy/paste the entire bootstrap.css
}
Recompile with less or use an online less compiler - http://winless.org/online-less-compiler
Edit the now-compiled file and change body {} CSS declarations to tb {}.
Use the new CSS file.
Place your "bootstrapped" content inside a <div class='tb'></div>
LESS documentation has a section about namespaces.
So you could define your lib in a separate document:
#ns {
.twitter () {
// Instructions to be used later
// Nothing will appear in compiled CSS except if called later (because of parenthesis)
}
}
import this file at the beginning of the CSS file to be compiled and use these instructions:
#my_div {
#ns > .twitter;
}
This is how I have done it. This takes place in the root of the bootstrap folder that is downloaded, or cloned from git.
## ./less/namespace.css (New file)
#ns {
.twitter() {
#import "less/bootstrap.less";
}
}
## ./style.less
#import "less/namespace.less";
.namespace {
#ns > .twitter;
}
Then run less style.less > style.css
Here is how I did it, based on majgis's github fork above:
bootstrap-ns.less:
#import "namespace.less"
.bs {
#ns > .twitter;
}
namespace.less:
#ns {
.twitter(){
#import "bootstrap.less";
}
}
You then reference bootstrap-ns.less in your html page. This was tested with dotLESS.
if you have control over the compilation parameters just set strictImports to false and work as you intended to everything should be fine. consider looking at less-strictimports or at this issue.