I am ugrading an app from rails 3.0 to 3.2 there is a problem with some of my scss code. stylin.css contains:
/*
= require_self
= require_tree .
*/
stylin.css.scss contains:
#import "palette";
#import "round";
#import "html_elements";
#import "graph";
#import "menu";
#import "button";
#import "pop_up";
#import "basic_abrev";
When the styling.css is updated 'palette' is imported but nothing else is imported. Consequently, I get the following error when loading the first page:
Undefined mixin 'round_corners'
I think it is because the top of 'round.css.scss' includes the following:
#mixin round_corners($radius: 8px) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
If no variable passed the default would be 8px. In the following case '20px' is passed to the mixin.
#include round_corners(20px);
This worked in 3.0. Is this no longer possible? If not, I'll have to create numerous mixins or discontinue using the mixing / include feature for rounding corners.
thanks.
I found this here:
If you want to use multiple Sass files, you should generally use the Sass #import rule instead of these Sprockets directives. Using Sprockets directives all Sass files exist within their own scope, making variables or mixins only available within the document they were defined in.
I found this here:
When using Sprockets 2.x with Sass you will eventually run into a pretty big issue. //= require directives will not allow Sass mixins, variables, etc. to be shared between files.
Found this here:
Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files. Instead, use Sass's native #import directive which sass-rails has customized to integrate with the conventions of your rails projects.
When I deleted this (sprockets commands) from the stylin.css.scss file, everything worked.
/*
= require_self
= require_tree .
*/
Related
I want to use Bootstrap with SASS, but I can't find any tutorials or explanation how one can use Bootstrap with SASS. The only thing I find is installatio trough a ruby gem:
compass create my-new-project -r bootstrap-sass --using bootstrap
Which creates the following tree in my folder:
Is this enough for Bootstrap to use its own Grid, because I don't see the bootstrap.scss file, neither any Grid related files. However, I find the grid classes and all in a styles.css file. Isn't there a bootstrap.scss file that has all the mixins and everything else? And where can I find a more extended use of SASS's Bootstrap mixins, which are described here briefly:
http://www.hongkiat.com/blog/bootstrap-and-sass/
Thank You all in advance! I really can't find nothing on my problem.
(I'm using .sass files in my answer, but it should apply to .scss files, too)
Isn't there a bootstrap.scss file that has all the mixins and everything else?
Yes, there is. Here's the generated styles.sass file:
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
bootstap_variables refers to the generated _bootstrap-variables.sass file in your project tree, whereas bootstrap-compass and bootstrap are imported from the gem's stylesheets directory.
The latter imports all other Bootstrap files, including the grid:
// Core variables and mixins
#import "bootstrap/variables";
#import "bootstrap/mixins";
// Reset and dependencies
#import "bootstrap/normalize";
#import "bootstrap/print";
#import "bootstrap/glyphicons";
// Core CSS
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/code";
#import "bootstrap/grid"; # <-- here it is
...
I don't really find an answer on liferay's blogs and google - so i hope anyone here can help me.
I'm trying to get started with sass in a custom theme i am building in liferay 6.2.
As i understand it, the approach would be this:
create an empty theme, (using maven,) based off _styled
this gives me a file layout like this:
<theme>
+-src
+-main
+-webapp
+-css
+- ... here i'll put any css overwrites
develop sass stylesheets, link to main.css
<theme>
+-src
+-main
+-webapp
+-css
+-main.css
+-custom.scss
main.css initially looks like this:
#import url(custom.css);
/* other css import here */
custom.scss would contain some SASS content:
$color: #f00;
body {
color: $color;
}
Now my question: How do I link both CSS and SASS together correctly? How does the #import statement in main.css have to be defined?
I tried #import url(custom.scss); but this won't give me the desired results. Likewise, #import url(custom.css); won't do it either.
I found the solution. Key is to understand that Liferay does not use the file extension *.scss on a theme's stylesheets. Just dropping my SASS code into a *.css file did the job!
Found the solution here.
My directory layout:
<theme>
+-src
+-main
+-webapp
+-css
+-main.css
+-custom.css
main.css looks like:
#import url(custom.css);
/* other css import here */
and custom.css like this:
$color: #f00;
body {
color: $color;
}
And the result is (in custom.css, after reloading on the web browser):
body {
color: #f00;
}
Hooray!
Yes, if you are working in Liferay 6.2 file extension should be .css, but if you are working in Liferay 7/DXP it should be .scss.
For example:
app.scss
#import url('orange.css');
#import 'navel.scss';
orange.css
.orange {
color: orange;
}
navel.scss
.navel {
#extend .orange;
}
In SASS if you add
#import "test.css";
or
#import url("test.css");
it is compiled to pure css #import directive. Because the file has a .css extension, the SASS preprocessor thinks that this is pure CSS and the code inside is not involved in the SASS language operations. In your example, if you try to extend .orange you will get:
The selector ".orange" was not found.
Shortly: the extending is possible only if you use SASS files.
#extend is not possible by importing a CSS file. You have to
convert your css into an SCSS partial (or file)
#import this partial
#extend CSS classes
The downside to this is you would be left with duplication. Supposed this import is a 7000 line long CSS file (like bootstrap), then you are going to be in trouble
In order to use
#include box-shadow(0 0 10px black);
you would have to include the "library":
#import "compass/css3";
later in the file, I am including other scss:
#import "sidebar/main";
and in that sidebar/_main.scss, when i call the same:
#include box-shadow(0 0 10px black);
compass breaks with an error:
< ... Undefined mixin 'box-shadow'.>
Does this mean that I'll have to abstract the libraries in my own library file, and then include that file in each and every other scss???
Rename the sidebar/main.scss to sidebar/_main.scss - no other code changes needed.
This instructs sass compiler not to compile the sidebar/main.scss file into a separate css file, but include it in the main scss file.
The process works like this:
sass compiles the main scss file with all inclusions and generates the css (no errors here, since compass is included at top)
sass compiles all other scss files that don't begin with _, but since these don't have compass included, it throws the error.
I'm upgrading a rails app with lots of SCSS stylesheets to use the asset pipeline, and need to include some global variables and mixins for each file.
Adding several #import directives at the top of every file isn't very DRY, so I'd like to do something like this:
# application.css
/*
*= require variables
*= require mixins
*= require_tree .
*/
This doesn't work of course, because the variables are not persisted across files. Anyone know how to achieve this?
The default manifest syntax isn't powerful enough to give you useful Sass features like shared variables, mixins, etc. Instead, you should:
Rename application.css to application.scss (or application.css.scss in Rails 4 or earlier)
Instead of using the
/*
*= require variables
*= require mixins
*= require_tree .
*/
nonsense, you should now use
#import "variables";
#import "mixins";
#import "blah"; // import each SCSS file in your project like this.
This will ensure you have full benefit of your variables and mixins throughout your project, and you are kept as DRY as Sass allows.
Simply importing the necessary file from each Scss or Sass file seems to have worked for me. For example, I have a colors.scss file that includes some constants like this:
$black: #222;
I require it in my application.css manifest along with some other files:
/*
*= require colors
*= require buttons
*/
In my buttons.css.scss file, I simply do this to avoid the error:
#import "colors";
Doesn't seem to be possible. Ended up prepending each file with #import 'includes/all'; and including everything else from includes/all.css.scss.
Replace require with #import and remove any = require even if you think you've commented it out.