I jumped into SASS tonight and I'm using Sublime Text 2 with SASS Build and SublimeOnSaveBuild. After much searching, I still cannot find how to specify a different output directory. I basically have a CSS/ directory and a SCSS/ directory which contains all of my SASS files. I want to output to ../CSS. I think it involves modifying the Package Setting file in Sublime. Here is the default preferences file:
{
"filename_filter": "\.(css|js|sass|less|scss)$",
"build_on_save": 1
}
I believe the "build" or "output" path goes there but I'm just not sure. Thanks in advance.
The answer is to change the settings for SASS Build, rather than SublimeOnSaveBuild. SASS Build creates a "Build System" for SASS and SASS Minified. You can go to Preferences -> Browse Packages, open the SASS Build folder, and then edit the two files ending with -build.
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
You can edit the file path there (there isn't a way to do per project yet it seems):
"cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
Now, how to get them to stop building partials...that's the separate issue that I'm currently trying to find the best way to resolve. EDIT: Stopped it from building partials. Posted a blog about it here.
Perhaps this does not directly answer your question, but I'd like to try.
In my SASS installation (with Compass, however), I have config.rb in my project. In there you can actually specify where the compiled CSS file go.
...
css_dir = "css"
...
If you are not using Compass, my humble suggestion is to have a look at it. It is sort of an extension to SASS (much like jQuery to javascript)
Install 'compass'. Create your next project in the terminal using compass (this is all documented) and the config.rb file will have the appropriate folders/directories and your sass/compass compiler will do everything automatically. You can either use compass watch in the terminal or a programme like LiveReload to do the work for you. In fact, use LiveReload. Honestly, you won't regret it!!!
Related
Can't find out the way to make source map for css. Can anybody give a hint?
So, there are a few ways to generate fileName.css.map or fileName.scss.map or anything you want.
First create a file optionalName.css.
1) Install sass: npm install -g sass.
The pattern looks like this: sass input.css output.css.
Then go to your terminal and type sass optionalName.css optionalName.css.
Sometimes you need to specify path to your file like:
sass src/css/example.css src/css/example.css
And you see optionalName.css.map file is generated in your folder.
You can also convert scss to css by running sass optionalName.scss:optionalName.css.
2) Go to VS Code and install Live Sass Compiler extension. When it's installed you'll see a Watch Sass button in the blue bar below. Just open a SCSS file you need, say, styles.scss, and press the Watch Sass button. Right after that all necessary files are generated in your folder:
styles.css
styles.css.map
styles.scss
Most compilers for SASS/LESS will make a sourceMap for you while compiling your code. If they didn't it's probably a setting.
You can read some more here https://cssdeck.com/blog/how-to-create-css-map-file/
I have just started to use less with Sublime, I have setup less2css to autocompile .less files when they are saved and to ignore partials.
I have a main.less which imports other .less files e.g. _global.less but this means every time I make a change to global I have to save it then go back into main.less to compile it.
Is there any way to get main.less to autocompile when any partial is changed?
I have figured this out, for anyone having the same issue in the future the solution I have found is to edit "main_file" in less2css settings so for my example above I have put:
"main_file": "main.less",
I suggest to start using npm, yarn or gulp if you prefer that.
https://www.npmjs.com/package/gulp-less
I am new to sass/scss and want to know how I can use sass file in my HTML project?
Do I have to first compile it into CSS with command line or anything else that compiles scss/sass runtime into css file at a time when webpage loads into browser?
So any help?
There are many options to create a Project working with SASS, but the most common is using Compass, I see you're new to it, I strongly recommend you read a Tutorial about Compass, after understanding this you should look others options to use the same SASS like working with gulp, gulp-sass, node-sass, browser-sync, and many other options to use the same Tool.
I'm new to using SASS and Sublime Text 2 for WordPress development, both are exactly what I need but I've run into a problem with compiling my SASS into CSS, which I'm trying to do using the SassBuilder package like it was in Hongkiat's guide.
The issue could be one of the following -
config-file using incorrect output-path (seems to be the case to me
personally).
config file location needs to be changed.
my coding SASS could possibly be wrong causing no changes to occur on the style.css file.
settings wrong with Sublime Text 2.
My files are SCSS and thus will not work with SassBuilder
The Underscores framework stores the style.css file in the root of the theme folder so
theme/style.css
this is while the sass files are found within a folder in the theme folder so
theme/sass/sassfiles.scss
In my .sassbuilder-config.json file (The file used by SassBuilder to compile into CSS) I currently have the following code, but I'm unsure whether my output_path is actually targeting the style.css file which is in the folder above the .sassbuilder-config file
{
"output_path": ".../style.css",
"options": {
"cache": true,
"debug": true,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
Is this targeting the correct file, if not what would the correct code to make it do so be? I've done some Googles but keep coming into pathing code for non related languages.
I could also consider moving the config file but the Hongkiat guide states it should be in the same folder as the SASS files, from what I've understood.
My code could possibly be wrong, but all I've done so far is just some basic variables to actually test the compiling and that not working when tested is why I'm here, I've copy pasted a font weight variable to all relevant files, individually, in various combinations and altogether even though the import should have sufficed - but even then it did not update the style.css in any case.
To get into detail regarding the code I'm trying to apply a font style to all headings, though one confusing thing is that there are two typography.scss files to be found with Underscores, though their contents sort of differ.
The SASS variable in theme/sass/variables-site/_typography.scss
$font-header-weight: 800;
Then in headings which if found in theme/sass/typography/_headings.scss
h1,h2,h3,h4,h5,h6 {
font-weight: $font-header-weight;
}
The other _typography.scss file draws variables from the one above so I presume that adding another variable was the thing to do.
As for Sublime Text 2, I'm new to Sublime Text but I've seen on tutorials and web articles etc that people are using code to watch but I'm unsure where/which program I do this with (is it command line?)
I have also followed the guide on the SASS site to get the code running so it shouldn't be that (using Ruby version 1.9.3-p551)
If the issue is SCSS files and not SASS, how do I compile it then? as I've looked that up too but am still as confused.
Hope I get some clarity on this soon, stuck at the first step and I just want to get on and start designing!
To summarize, I just want my SASS to start watching/compiling out to my CSS file.
I'm using a similar arrangement to you.
Try this:
Instead of Sass Builder (or in addition, i have both installed)
download and install the package "SASS Build" by Jaume Fontal.
Then, in Sublime Text 2, Preferences -> Browse Packages, go to the SASS Build package folder and edit the very short build file (SASS.sublime-build) as follows: (note you only have to add the /../ in the first line)
{
"cmd": ["sass", "--update", "$file:${file_path}/../${file_base_name}.css", "--stop-on-error", "--no-cache"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
On my install, it now compiles scss to css in the parent folder.
Surely
"output_path": ".../style.css",
should just read
"output_path": "../style.css",
your output path is just incorrect I think.
I decided to go with ScoutApp as a solution, may not answer my immediate query but it makes things a lot more simple, straights forward and less fiddly.
Also I did change my out_path code to ../style.css but it didn't help.
Have you installed sass? If not use gem install sass in a terminal window, restart sublime text and try again.
IE 8 and lower has a limit to the number of selectors allowed in a single style sheet and once the limit is reached the style sheet needs to be split. Apparently someone addressed this in Compass by creating a way to have Compass do this automatically, and created a gist about it. I however don't have the skills to know what the next step is and there is little in the way of documentation on what to do with this code. Can anyone help with how to integrate this into my Compass install?
Ref: https://gist.github.com/1131536
Thanks much!
Create css_spliter.rb file (as described in your Ref) beside your config.rb file, at the root of your sass project.
Add the following line at the beginning of your config.rb file
require 'css_splitter'
And add the 3 following lines at the end (of config.rb)
on_stylesheet_saved do |path|
CssSplitter.split(path) unless path[/\d+$/]
end
Then run compass compile as you usually do. You won't see the files *myFile_2.css*, *myFile_3.css*, ... appear in the logs but they are well created in your css folder. Also the command compass clean won't remove them, you'll have to dele them manually from your css/ folder.
For what it's worth, there is a Node.js app called Bless that will provide you this functionality. It can run server side or on your local machine.
If you happen to be using CodeKit to compile your Sass/Compass files, it's baked in, you just have to enable it in project settings.
I think the css_splitter solution forgets to remove the code from the first file. Now I have 2 files, the first one is all of my css and the second generated file has the 2nd half of the original file. So I have 150% the amount of CSS as I used to... I did fix my problem in IE though :)