Dove into SASS this morning for the first time, and I am impressed with the potential...but I am having a slight issue.
(Using Gumby Responsive framework)
So far, I can't seem to get the _custom.scss to compile with everything else.
// Your custom SCSS should be written here...
$color: #0066a6;
body{
background: $color;
}
I added the above to the _custom.scss, went to the command prompt, typed "compass compile" and it returned "unchanged sass/gumby.scss"
I also tried "compass compile sass/_custom.scss" and all that did was create a "custom.css" that (of course) was not showing up either.
What am I doing wrong?
By using the _ at the beginning of your stylesheet name, your using a sass partial. That tells sass to not create standalone stylesheet for _custom.scss at compile time.
Remove the partial to make sass create the sheet: ie. rename it to custom.scss
or keep the partial and import it into your main stylesheet with:
#import "custom";
Example, two sheets _reset.scss and base.scss:
/* _reset.scss */
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
/* base.scss */
#import 'reset';
body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
Here _reset.scss wont be compiled into its own standalone sheet ( because of the partial), but will be included in the base.scss sheet right before the body declartion ( because base.scss isnt a partial). The output would look like this:
/* base.scss */
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
Make sure your compass configuration is setup correctly. First initiate your project with:
compass create path/to/project --sass-dir=[your_sass_dir]
Then you'll have a config file called config.rb. It should look something like this:
# Location of the theme's resources.
css_dir = "css"
sass_dir = "sass"
fonts_dir = "css/fonts"
extensions_dir = "sass-extensions"
images_dir = "images"
javascripts_dir = "js"
Solution Found
Was the weirdest thing...opened the "gumby.css" (was a last ditch, "i'm getting super peeved" moment) hit select all -> delete -> save -> close
Then headed back to the command prompt, did the 'compass compile' command, and somehow voila...apparently I just needed to delete everything in the original gumby.css before continuing, because then it recreated the css file with the #import partials working.
Related
I'm using SASS, writing in style.scss compiling to (style.css & style.map.css), but how to convert style.css file to completely normal style.css file?
The compiled style.css file looks like this
div{
margin: 0 auto;}
p {
text-align: center;}
How to convert it into normal.css?
The default output style for Sass is normally nested, which is the style/formatting you see in your style.css file.
Possible options are:
nested
expanded
compressed
compact
If you change the output to expanded before compiling your file, you will probably get the style you want.
sass --watch scss:css --style expanded
Will produce this:
div {
margin: 0 auto;
}
p {
text-align: center;
}
PS. If you are using somtehing like Gulp, the task could be set up like this:
.pipe(sass({ outputStyle: 'expanded' }))
I want to create different css-themes for a WordPress theme by using theme setup files. The setup (simplified) would be as following:
/themes/_theme1.scss
/themes/_theme2.scss
/components/_file1.scss
/components/_file2.scss
/theme.scss
The idea is to enable easy theming by adding a class to the body of the document like .theme-theme1 or .theme-theme2. In the files _theme#.scss I want to define variables like text colour, font sizes and so on. In _file#.scss the actual styles are defined.
My question now is, how to iterate over the theme setup files while filling up the files.scss.
Sample idea, Background colour:
body {
###foreach themefile###
&.theme# {
background-color: $background-color;
}
###/foreach###
}
I know how to do this with only one theme available in the resulting CSS file, but I want to make ALL themes available in the resulting CSS. Feel free to ask more details as I am not sure if I explain me right.
Is there a way to create this stylesheet via some kind of foreach loops through variables in theme files or does it have to be done with extra scss-rules per theme file?
This is somewhat possible using a combo of #import with a #mixin to generate the styles. This method should produce minimal repeated code.
Here's how we'll setup the files.
- scss
- themes
- _theme1.scss
- _theme2.scss
- _theme.scss
- styles.scss
The _ prefix on some of the files prevent them from being compiled into CSS to keep our build nice and clean. Now let's go through the contents of the files:
_theme1.scss
$theme-name: 'theme1';
$primary-color: red;
$primary-font-size: 24px;
_theme2.scss
$theme-name: 'theme2';
$primary-color: blue;
$primary-font-size: 12px;
This is an oversimplified example but should give the basic idea. Each theme file will contain only variables.
_theme.scss
#mixin themestyle() {
body.#{$theme-name} {
p {
color: $primary-color;
font-size: $primary-font-size;
}
.bordered {
border: 3px solid $primary-color;
}
}
}
The themestyle mixin will contain all the styles for each theme, using the variables from the /themes/_theme*.scss files. The body.#{$theme-name} will create a selector like body.theme1 or body.theme2, depending on the current value of the $theme-name variable.
In this demo I'm styling on a p tag but this could easily be extended to all elements/selectors for your site. The important thing to remember is all styles need to be inside the body.#{$theme-name} selector.
Now the final, and least DRY part. The styles.scss file will import each theme file then call the themestyle mixin to generate the styles for each theme.
styles.scss
#import 'themes/theme';
/* Theme 1 Styles */
#import 'themes/theme1';
#include themestyles();
/* Theme 2 Styles */
#import 'themes/theme2';
#include themestyles();
The repeated #import/#include is required because it's not possible to #import within a loop or mixin, or this could be optimized a bit more.
Once styles.scss is compiled the output will be:
/* Theme 1 Styles */
body.theme1 p {
color: red;
font-size: 24px; }
body.theme1 .bordered {
border: 3px solid red; }
/* Theme 2 Styles */
body.theme2 p {
color: blue;
font-size: 12px; }
body.theme2 .bordered {
border: 3px solid blue; }
These themes can now be implemented by adding a class to the body tag, like <body class="theme1"> or <body class="theme1">.
Here's a Cloud9 project showing the setup.
How can I Include .scss file in another .scss file?
I was trying to write this in a file:
app.scss:
#include('buttons');
#include('dropzone');
body {
background: $primaryColor;
overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
height: 100%; /* Cover all (100%) of the container for the body with its content */
padding-top: 70px;
} /* more css code here */
and it returns an error : invalid css after #import
I try to include 2 other scss files inside the main scss file, so it will be all compiled to one css file eventually. How is it possible?
You can import it like this;
#import "../../_variables";
#import "../_mixins";
#import "_main";
#import "_login";
#import "_exception";
#import "_utils";
#import "_dashboard";
#import "_landing";
According to your directories and it will do what you want.
You can include a partial by doing this:
#import "partial";
The imported file needs an underscore, so sass will recognize it to be included: _partial.scss
You can use #use rule for it. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
see how to using #use 'base'; in the styles.scss file
// styles.scss
#use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
you don't need to include the file extension.
#osherdo You have no need to add !important for overwriting bootstrap CSS.
body
{
background: #4d94ff; /* Use to override Bootstrap css settings. */
}
First of you need to verify from where bootstrap is rendering on the page and what is the weight of the bootstrap CSS file. After that you can place your 'css/app.css' file after bootstrap then it will work. Then you can easily overwrite the entire bootstrap CSS.
Ok, so it appears to be that my app.scss file collide with Bootstrap.css file.
Because I wanted the app.scss background property to apply, instead of the bootstrap css file. I've added !important in this property to override bootstrap style.:
body
{
background: #4d94ff !important; /* Used to override Bootstrap css settings. */
}
Also, gulpfile.js has been updated to suite my needs accordingly:
var elixir = require('laravel-elixir');
elixir(function (mix) {
mix.sass('app.scss', 'resources/assets/css')
.styles([
'app.css'
], 'public/css/app.css');
mix.version([
'css/app.css'
]);
});
And that's how I fixed it.
I'm writing my own static site generator in ruby and I'm in the process of adding Sass compiler to my code.
def compile_sass
# system 'sass _sass/styles.scss styles.css'
options = {
syntax: :scss,
style: :compressed
}
render = Sass::Engine.new(File.read('_sass/styles.scss'), options).render
File.write('style.css', render)
end
But problem occurs when the styles.scss file has #import in it. Causing
(sass):1: File to import not found or unreadable: variables. (Sass::SyntaxError)
Both SCSS files are located in _sass folder, main script in root, and compile_sass is located in _generator. But when I uncomment the system call and comment the rest, everything works as expected.
styles.scss
#import 'variables';
html {
background-color: red;
}
_variables.scss
body {
background-color: blue;
}
I tried almost everything, checked how to import stuff, looked at the documentation, but I can't find anything that would helped me find and define the problem.
Turns out I had to load all _sass/*.scss files into Sass::Engine like this:
Sass::Engine::DEFAULT_OPTIONS[:load_paths].tap do |load_paths|
load_paths << '_sass'
end
I have the following in my scss file:
#import compass
$base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';
html {
#include establish-baseline($base-font-size);
font-family: $lato;
}
but when I check my CSS, the #include establish-baseline rule doesn't output anything and I get no compilation errors. Anyone any idea what could be wrong?
The main problem:
In your case, you should put the imported file name "compass" between quotes:
#import "compass"
If you only want to import establish-baseline mixin use instead:
#import "compass/typography/vertical_rhythm";
Some tips:
It's not necessary to set $base-font-size: 16px because imported compass files comes with a $base-font-size: 16px !defaultvariable declaration
As #nyuen says you don't need to pass $base-font-size as an argument and you should move the #include establish-baseline out of the html.
Here is the modified code:
// you should use the file name to import between quotes
#import "compass";
// $base-font-size: 16px !default; it's already declared in compass
// $base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';
// This include should be use out of any selector
#include establish-baseline();
html {
font-family: $lato;
}
I'm just learning about vertical rhythms as well, and here's my suggestion:
I think the syntax should be "#include establish-baseline;" (without the $base-font-size argument because when you include the establish-baseline mixin, it automatically looks for that argument, as well as $base-line-height), and you can also move that line out of your html selector to under the $base-line-height declaration.