If I have a file called 'structure.scss' and inside this file I have the code
body { margin: 20px; }
and I have another file called 'fonts.scss' with the following code inside
body { color: red; }
and I use codekit to compress I get the following code
body{margin:20px;}body{color:red;}
Is there any way to get the code minified even further or is there an option in codekit to do this to make the code...
body{margin:20px;color:red;}
No, that is not possible in Codekit.
Related
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 want to override the default values in scss file like
.auth-form {
width: 800px;
}
I change the width values in class auth-form scss file. But it is not working.
How to override the values in scss file. Please let me know.
Making assumptions on what will be the case you are probably facing a scope issue. If you have the following css:
.foo .bar {
color: red;
}
.bar {
color: blue;
}
.bar will always be red, because you are not overwriting the selector in the correct scope.
So in your case you need to specify the full selector:
.full.scope .auth-form {
width: 800px;
}
Where .full.scope is the full selector to .auth-form. You can get the full selector using on the css you eqnt to overwrite using the browser inspector.
Another option will be to make the property prioritary using the !important css keyword so it will overwrite any previous definition:
.auth-form {
width: 800px !important;
}
Hope it helps.
.scss (sass) files are not directly loadable into browsers, they need to be compiled to .css files first, then those are loaded into browsers by your application.
It seems you are not performing the compilation step (also called preprocessing or precompiling) and this is the reason you do not see the modification in your app.
How the compilation should be done varies. You may use sass directly (see here) or if you are using a framework there may be tools that combine this and other automation steps. For instance in Ruby-on-Rails you would install the required compile tool in the form of a gem and run:
bundle exec rake assets:precompile
As you do not provide details on your environment / framework is is difficult to provide the exact procedure applicable to you.
I was wondering if anyone had found a way to create different CSS files from the same less files.
In my context I created a different customer less file. This file consist in a series of variable with their settings for the theme of a specific color and other CSS instruction.
I also have a less file for the default settings.
Here a representation of the less folder
Less Folder
My less folder
All the style specific to my context
customer.default.less
cutomer.less
I would like to compile two different css from the "My less folder" the first one would use the customer.default.less file in the variables. The second one would use the customer.less file. Creating the customer.default.css and the customer.css. In order of having the customer.css and the customer.default.css all way in synch together.
I'm currently using the compiler plugin in webstorm. Am I using the right tool?
Thanks
You can indeed produce multiple CSS outputs from a Less file, provided you use 'control' Less files.
E.g., here is the main stylesheet we're using for a site:
/* main-stylesheet.less */
#maincolor: #ff0000;
#secondarycolor: #00ff00;
body {
color: #maincolor;
background-color: #secondarycolor;
}
Now, we want to produce a secondary stylesheet (to output 'customer.default.css', or 'customer.css' as you prefer) - we import the main Less and override its variables:
/* secondary-stylesheet.less */
#import "main-stylesheet";
// Override variables from the 'main' stylesheet.
#maincolor: #0000ff;
Note that we do not define any rules or set any styles here, only override the variables.
Here are the output CSS files:
/* main */
body {
color: #ff0000;
background-color: #00ff00;
}
/* secondary */
body {
color: #0000ff;
background-color: #00ff00;
}
This is possible because Less uses lazy loading.
Be sure that the file watcher setting 'Track only root files' is disabled; otherwise the main stylesheet in our example would not produce any output css.
(Also, I would separate the two variable declaration blocks into their own Less files - perhaps as theme-variables-default.less and theme-variables-override-a.less)
I think you can accomplish this using the grunt-contrib-less GruntJS task with something like this in your Gruntfile.
less: {
development: {
files: {
"path/to/customer.css": "path/to/customer.less"
"path/to/customer.default.css": "path/to/customer.default.less"
}
},
production: {
files: {
"path/to/customer.css": "path/to/customer.less"
"path/to/customer.default.css": "path/to/customer.default.less"
}
}
}
LESS isn't my bread-and-butter, but using Sass enough and the grunt-contrib-sass task I assume the same set of features would exist.
Following along to the tutorial at http://refinerycms.com/guides/getting-started which says to
Seemed simple enough. So I created app/assets/stylesheets/about-page.css wtih some test code
p {
color: green;
font-size: 32px;
}
But that sitll got applied to the home page.
What am I doing wrong here?
That is not what is meant.. the about-page refers to an id so it's like this using SCSS syntax with, say, styles.css.scss which is included by application.css automatically using the asset pipeline:
body#about-page {
p {
color: green;
font-size: 32px;
}
}
Can't give you the right answer, but instead you could also use body id's, so each individual page has an id of it's page name in the body. That way it is even more specific to target your css. At least that's what I do using Wordpress:)
(I have searched various answers, but couldn't find anything relevant.)
I have two LESS files, say, file1.less and file2.less. file1.less contains import of file2.less. Files are compiled into .css OK so I have file1.css but the problem is that file2.less is ALSO compiled into file2.css besides its imported contents in file1.css. That is, I have duplicate contents of file2.less - in compiled file1.css and its own separate file2.css.
Is there any way to have file2.less imported and file1.less and NOT create its own file2.css? (I use WebStorm plugin compiler, if it matters.)
To make it visually clear, here's what I've got:
file1.less (e.g., contains body { font-size: 100%; } and "#import file2.less")
file2.less (let's say it contains body { background-color: #ffffff; })
RESULTS:
file1.css with
body { font-size: 100%; }
body { background-color: #ffffff; }
AND
file2.css with body { background-color: #ffffff; } (duplicate!!!)
How do I prevent file2.css from being created and just have it imported into file1?
This is something related to your compiler, not a LESS issue. I have never used this compiler of yours myself but I can suggest you to use http://winless.org/ if you are a Windows user (or less.app on Mac).
Winless watches a folder and subfolders for modifications (in .less files) and creates a ".css" based on the file you define as your bootstrap.