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.
Related
I have the following project structure:
gatsby-config.js
/src
/components
layout.jsx
/button
button.jsx
button.scss
/pages
/styles
styles.scss
_mixins.scss
_variables.scss
and gatsby-config.js and styles.scss are configured respectively in the following way:
...
plugins: [
...,
`gatsby-plugin-sass`
]
...
#import 'variables',
'mixins';
in order to access the mixins and variables, the styles.scss is being currently imported in all the components' scss files, e.g.:
//button.scss
#import './../styles/styles.scss'
This approach is working, but the problem is, as the project grows, the styles.scss is being imported multiple times and seems to be something wrong with this approach.
Is it possible to import styles.scss only once, and make all mixins and variables available across all the components?
You are able to pass options to Sass via gatsby-plugin-sass.
The following options would globally expose the contents of ./src/styles/_styles.scss to each Sass file in the project, without the need to explicitly import it.
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-sass',
options: {
data: `#import "${__dirname}/src/styles/styles";`,
}
},
],
}
Note: The below might be obvious to some but it's worth mentioning for future readers.
Only do this with Sass files that contain just variables, mixins, functions, etc (Sass features that do not output any actual CSS until they are consumed). Otherwise you will end up with CSS that is repeated multiple times across your project.
Example repo
Providing SCSS variables globally to your components
With #use
SCSS syntax
gatsby-plugin-sass
Component-Scoped Styles with CSS Modules
gatsby-plugin-sass config
gatsby-config.js file:
{
resolve: `gatsby-plugin-sass`,
options: {
implementation: require("sass"),
data: `#use "${__dirname}/src/global-styles/variables" as var;`
}
},
var will be used as namespace.
Providing variables to your scss files
./src/global-styles/_variables.scss
./src/components/main.jsx
./src/components/main.module.scss
Info about the underscore in _variables.scss, partials.
_variables.scss file:
$color-1: red;
$color-2: blue;
main.jsx file:
import React from 'react'
import style from './main.module.scss'
const Main = () => (
<div className={style.main}>Content</div>
)
export default Main
main.module.scss file:
.main {
color: var.$color-1;
}
But I need expose some global styles in gatsby-browser.js
Well, your are going to need #use, or follow other answers that use #import in gatsby-config.js. Mixing #import and #use may not work because of:
Heads up!
A stylesheet’s #use rules must come before any rules other than #forward, including style rules. However, you can declare variables before #use rules to use when configuring modules.
https://sass-lang.com/documentation/at-rules/use
I stopped using #import, only using #use.
global-styles.scss file:
#use "./variables" as var;
body {
color: var.$color-2;
}
gatsby-browser.js file:
import './src/global-styles/global-styles.scss'
Create a file named gatsby-browser.js in the root of your directory. Import the .scss file once and it will work perfectly .
In your gatsby-browser.js
import "./src/styles/styles.scss"
As Ankit Sinha mentioned, you can import your styles in gatsby-browser.js:
import './src/styles/styles.scss';
This method is mentioned in the Gatsby tutorial.
According to the docs (see Standard Styling with Global CSS Files):
The best way to add global styles is with a shared layout component.
Your project structure suggests that you are using one (layout.jsx). If that's the case, you can also import your styles in layout.jsx:
import './../styles/styles.scss';
I cant write comments yet. I dont have the reputation. But what a complete answer from Undefined Behavior.
Just to order a little bit:
Import your global-styles.scss in gatsby-browser.js
Configure something that's going to be exposed to all scss files, in your gatsby-config.js.
It can be an #import or an #use. With #import you access directly to your variables and mixins and with #use you reference it. I don't really know what are the benfits of both, but you could use any.
Am trying to use SASS in my project. I wrote a SCSS and then converted that to CSS.
The SCSS I created is ,
$primaryColor: #D92231;
body {
$primaryColor: #ccc;
background: $primaryColor;
}
p {
background-color: $primaryColor;
}
ui-btn {
background-color: $primary-color;
}
Converted that SCSS to CSS by the command,
sass-convert style.css style.scss
Finally I got the CSS generated. Generated CSS is ,
$primaryColor: #D92231
body
background: $primaryColor
p
color: $primaryColor
ui-btn
background-color: $primary-color
I linked this to my html page but no effect. Where am I going wrong ???
The generated CSS isn't actually CSS as sass-convert doesn't actually convert sass to css.
It converts CSS to SASS or SCSS dependant on what you want.
To convert the SCSS to SASS you will need to run the below script. You will need SASS installed.
sass input.scss output.css
Alternatively, you can run a script to have Ruby watch the SCSS file and update on every save.
Like so:
sass --watch input.scss:output.css
Read more here: Documentation
Try your Sass at sassmeister.com and you'll see that primary-color variable is not defined. I believe your code never gets compiled because of that error. See : Sassmeister output in Github Gist
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
...
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
I'm in the initial stages of setting up a project and wanted to structure my sass files appropriately.
This is my structure:
/css
style.scss
/partials
_colors.scss
In style.scss
#import 'partials/_colors';
body {
background-color: $mainBgColor;
}
In _colors.scss
$mainBgColor: #eee;
When I attempt save style.scss, I get error on save... check file for syntax or something to that effect.
In fact, each of these #import directives produce errors:
#import 'partials/_colors.scss';
#import '_colors.scss';
#import '_colors';
#import _colors;
What am I doing wrong?
Try removing the underline and the extension on the file name, like this:
#import "partials/support";
#import "colors";
That should do it, good luck!