I'm currently working on a large business website using Compass (the Bootstrap Fork). We are using many different scss files, all of them including base.scss, where our variables and mixins live. Now, we want to compile some optional css files from our scss files, that receive the variables from the base.scss files at compile time, but won't have the overhead of all the other rules defined in base included in the finished and compiled css file.
So basically, I'm looking for a way to reference the base file instead of including it. I just want $companyColor (etc...) to be replaced with the value of the corresponding variable in the base file.
Please note, that I cannot have those lose files #imported in my base file, because these files overwrite some of the base rules and are only loaded on certain pages of the website to provide an alternate theme.
Is this at all possible?
Thanks in advance!
Not sure I fully understood what you asked.
But if you want some variables from base.scss to be included in other scss files, you can split your base.scss in two files:
shared-vars.scss containing variables that will be included in
optional scss files
base.scss containg all other variables and mixins, and importing
shared-vars.scss
Now you can import base.scss in your main scss files and only import shared-vars.scss in your optional scss files
Related
I want to have 2 pages with their own style using sass. now I have a main.scss file and all styles will be compiled in style.css with this command in package.json "watch:sass": "node-sass sass/main.scss css/style.css", if I want to have another page I can still use this main.scss file but when I load this page all style of the first page will be come with style.css. may I have two separate main.scss file for each page? if yes how should I change "watch":sass "node-sass sass/main.scss css/style.css",
my second question is how can I use common styles like for header and footer which are in both pages?
UPDATE
I created 2 main.scss file. and 2 separated style.css and put them beside each other . and I modified my watch script like this:
"watch:sass": "node-sass --watch sass/main.scss:css/style.css sass/main2.scss:css/style2.css"
my first main.scss and style.scss works but the second main.scss and style2.css does not work
If you are not using a framework such as Angular, which allows you to have both global and local styling out of the box, you can simply create your own separate .scss file for each page, and import them into their respective .html files. You can then use the !important flag to override global styling.
You cannot simply import .scss into HTML files though, you would need to use something like LESS CSS. You can find more here [https://stackoverflow.com/questions/19215517/attaching-a-scss-to-html-docs]
For the common styles, you can simply use the global classes defined in main.scss.
Hope this helps.
Yes, you can have separate main Sass files for each page. Instead of having a single main.scss file, you can create separate Sass files for each page and import them into a main Sass file that serves as the entry point for your Sass build process.
For example, let's say you have two pages, page1.html and page2.html, and you want to have separate Sass files for each page. You can create the following Sass files:
page1.scss
page2.scss
main.scss
In the main.scss file, you can import the page1.scss and page2.scss files using the #import directive:
#import 'page1';
#import 'page2';
Then, you can update the "watch:sass" script in your package.json file to use the main.scss file as the entry point for your Sass build process:
"watch:sass": "node-sass sass/main.scss css/style.css"
This way, when you run the "watch:sass" script, the main.scss file will be compiled and all the styles from the page1.scss and page2.scss files will be included in the resulting style.css file.
To use common styles for the header and footer that are shared between pages, you can create a separate Sass file for the common styles and import it into both page1.scss and page2.scss. For example, you can create a _common.scss file with the styles for the header and footer, and then import it into page1.scss and page2.scss:
// common.scss
.
I created another main.scss file called it main2.scss . I modified the watch script like this :
"watch:sass": "sass --watch sass/main2.scss:css/style2.css sass/main.scss:css/style.css",
now Ican use style2.css for page 2 and in this way for page 2 I will load only relevant css style for only page 2.
Dont forget to stop npm start and re run it again
I read somewhere that its good to have only one css for all pages in sake of browser cache and etc... but in this way I have separated css for each page. Please comment your opinion about it.
I have some scss files in different folders. I want to concatenate them into one file main.scss and to compile this main.scss. I used gulp-concat for this, but using this plugin I get wrong images URL paths in main.scss and wrong sass #imports paths.
Maybe somebody knows plugin for concatenating files with saving correct paths for images URLs and for sass #imports?
You shouldn't concatenate SASS/SCSS files before compilation. Use #import SASS directive instead. More information here.
So I understand that a similar question has been asked somewhat before : Structure a stylesheet to manage skins or themes Although I think due to kapsula not being able to articulate (him/her)self properly it was deemed unclear.
I am working on a large project with mulitple CSS/LESS files. We have broken up a lot of the monolithic CSS files into individual ones for CSS specific to certain pages as well as common CSS files for common elements on each page (menus, image placeholders, etc..)
We would like to incorporate multiple themes for the project so we decided upon the following structure:
In the base directory we have all the CSS/LESS specific to all the pages in project, except the colours which we set in the theme directories which are situated within the base directory.
So it looks something to the effect of this:
-CSS
- ORANGE [directory]
-> classic.less
-> controls.less
-> classic.less
-> controls.less
Inside the classic.less file in the ORANGE directory we simply insert the directive #import "../classic.less" and upon saving the file our CSS is generated with all our lovely colour themeing as stipulated in the ORANGE->classic.less file.
So while this process has saved a little bit of work in terms of management of the files, every time I make a change in base directory (maybe i added a new element type to the front end) I have to go into each LESS file that inherits from it and save it again in order for the new CSS to be generated.
Is there a more efficient way of doing this? Or am I looking at doing themeing in an incorrect manner. Should I illustrate what I am trying to do a little bit more?
There is a more flexible way, but you'll need WinLess (maybe it's doable with something else, I just found this to serve my needs) which requires Windows. There should be something similar for other OS'es if you search.
What I've done is, in the CSS or Stylesheet folder of my project, I've created another one named LessBase. Here I keep the core stylesheets. Example:
-Stylesheets
-LessBase
->jquery-ui.less
->forms.less
->buttons.less
->grids.less
->widgets.less
->etc
Then, in the Stylesheets folder, you'll need additional folders with your individual themes. Building on the previous example:
-Stylesheets
-LessBase
->jquery-ui.less
->forms.less
->buttons.less
->grids.less
->widgets.less
->...
->all.less
-Orange
->color-theme.less
->main.css
-Black
->color-theme.less
->main.css
Please note the all.less file. This one is used to import all the files within the LessBase:
#import "buttons.less";
#import "forms.less";
etc
The color-theme.less will basically hold all of your colors. Inside LessBase, all of your .less files will have variables which will be defined in each of the color-theme.less file residing in the theme folder.
Your color-theme.less file might look like this:
#main_color: #edf123;
#secondary_color: #daa123;
#border_color: #e7e7e7;
.
.
.
#import "../LessBase/all.less"
The import of all.less has to be at the end, in order to have the variables defined.
Then, inside WinLess you will make the color-theme.less compile into the main.css placed in the corresponding theme folder.
Here is a screenshot with an example (I blurred out the sctructure. Also, default_1, default_2 are the theme names, replace them with orange, black or whatever theme name you have):
I am developing the RWD web app using twitter bootstrap, i want to do customize the bootstrap fro my needs, for that i downloaded the bootstrap source from getbootstrap.com .
I am planning to customize the bootstrap by keeping the bootstrap less files untouched and i want to create my own less files for customiztion as below
#import "../bootstrap/less/bootstrap.less";
#import "custom-variables.less";
#import "custom-other.less";
#import "../bootstrap/less/utilities.less";
But when i downloaded the bootstrap source, i am seeing so many folders along with the bootstrap LESS folder as below,
My question is: what are the files needed for me from bootstrap source folder to include in my web project.
Thanks in advance for any help.
The only file you need to import is bootstrap.less from less folder.
This file itself imports all the other .less files from that folder (besides theme.less, which is used for theming).
I'd suggest importing bootstrap.less and using theme.less to develop customized solutions.
Reading source of both files above may be beneficial to understanding what is "under the hood".
Remember that although you only import bootstrap.less, all the other files must be kept where they are, in order for bootstrap.less to be able to import them.
The files you need are in LESS folder. You can create a new file if you don't want to keep bootstrap same with layout.less . And can import that in master. After compilation your changes will be on top of it. You can use any compiler of your choice. e.g. Sublime Text plugin
You can also use just bootstrap.min.css and write your LESS code in a file a compile it to apply your custom changes(remember to import or include in your html file). This way you don't have to keep track of so many LESS file. As in any way your plans are not to change base bootstrap. So you can choose precompiled version and can always replace it when new updates come.
So I'm trying to set up an environment where I can generate a new project and minimize the customization/complexity involved in setting up that new project. I'm using Structurer Pro (from nettuts+) to build the fileset, and this is an awesome thing. I've got github for MAC set up, allowing me to grab the latest Foundation framework files and put them in to the current project.
Now, I'm trying to incorporate LESS into the process also. However, Foundation's css files aren't currently set up with LESS, which means I have 2 options...(1) take a current version and LESS-ize them, then use those customized files to create new projects. (2) don't use LESS...
The other problem I have is, there seem to be quite a few compilers for LESS (simpLESS, CodeKit, LESS, compass), but none of them combine css files! So if I set up 10 LESS files (e.g. IE.less, mobile.less, grid.less, typography.less etc), and have the variables in them, I really don't want 10 css files as the output. I really want 1 compiled css file as the output. I know I can do this manually, or even through Clean css or any of the 30 other sites out there...
But is there one 'thing' out there that will let me use the latest files to create a project framework, customize it by applying a color swatch set to a series of variables (LESS), then compile & combine the resulting CSS for actual implementation?
Foundation ended up moving to SCSS in version 3, so this became kind of a moot point...
Trying to answer some of your questions:
Rename Foundation's .css files to .less and put in your /less/ directory.
Any .css file is a valid .less file (not vice versa though)
You don't have to convert this CSS to LESS, do so only for things you're going to be modifying, and save some time ;)
In your master.less file import these files with #import 'foundation-file';
re: how to combine css/less files :)
Compile only the master.less and include it in your HTML
master.less is your assumed MAIN stylesheet which may actually contain only #import statements, for me it's easier to manage everything this way (and where the combination happens). it will compile to master.css which you then use.
I'm not sure what css foundation includes, if it's a reset.css or something similar I would just leave it and not less-ize it. You would have two css files: one reset.css and one styles.css (the latter of which would be compiled from less files).
You could then add your own setup including a style.less which #imports the various components, if you make this generic enough you can reuse it throughout various projects.
The lessc compiler does handle the #imports of various files and combines them into one file: I have styles.less which #imports base.less components.less etc. I just compile the styles.less to styles.css and it handles the rest:
lessc styles.less styles.css
See: https://gist.github.com/1480684