Okay I have zurb installed on a drupal project and have it running with grunt, since it only has one main scss file [themename].scss and I'd like to have a multilingual website, I wondered how can I create a secondary .scss file for RTL pages, so it can override the main css file when viewing the RTL website.
I used to use foundation for building drupal themes. And here is how I handle rtl scss files.
Folder structure:
- scss/
|
- _settings.scss
- _settings-rtl.scss
- app.scss
- app-rtl.scss
- bower_components/
- config.rb
settings.scss; Standard foundation settings.scss file.
settings-rtl.scss; import settings.scss at the beginning of the file (to inherit all define variables) and then override any values you want.
#import "settings";
$text-direction: rtl;
$opposite-direction: right;
// any other settings you want to override.
app.scss;
#import "settings";
#import "../bower_components/foundation/scss/normalize";
#import "../bower_components/foundation/scss/foundation";
app-rtl.scss;
#import "settings-rtl";
#import "../bower_components/foundation/scss/normalize";
#import "../bower_components/foundation/scss/foundation";
Well I can't help you with the SCSS file but as for CSS you can just add another themename-rtl.css file manually to the CSS directory and start coding
Related
Is there any way to import all _*.scss files to main App.scss file in React project? As I have separate folder for each component, I want to avoid typing
#import './components/UI/button';
#import './components/UI/menu';
#import './components/Forms/textInput';
What would be perfect is a working code like this:
#import './components/*';
I'm aware of order problem, I doesn't affect my css, files can be imported randomly.
The glob package will do it if you really wanted. I would advise against it though, including a sass file directly in the component is more efficient but mostly because order matters in CSS.
You can create file _index.scss in components directory and import all files from the subdirectories. After you can import writing #import './components/index'; or #import './components';
In my React app, instead of using styled-component or CSS-in-JS or importing a particular SCSS file into a component,
I used the SMACSS method where the only stylesheet that's being imported is the index.scss, which imports all the SCSS
files inside the styles directory.
Initially, I did the method of importing each SCSS file,
but I changed my mind after realizing that my file structure was messy and switched to the less modern way.
I'm just
wondering if there's a difference between importing each stylesheet and importing only one in terms of performance and
speed of an app.
I don't think it will make much difference in performance but you would be better off building up the good structure of code which is always recommended.
It's always good practice to create the single folder scss and then provide the references in main.scss of other files in folders like this way.
#import 'var';
#import 'mixins';
#import 'normalize';
#import 'default';
#import 'global/inputs';
#import 'global/btn';
#import 'components/modal-general';
#import 'components/modal-tabbed';
Then you can also use this single reference main.scss or index.scss in app.js or index.js
I created a React app using the create-react-app package. I've including the minified css allowing me to use Foundations class system.
Now I want to customize the styles provided by Foundation.
I see there is a foundation folder within the node modules that contains the necessary _settings.scss, _gloabl.scss, and foundation.scss files, but I don't think I should be pulling those files out and dropping them in my src folder.
How can I set up my folder structure up with a React app that utilizes Foundations Sass library giving me customization abilities?
Thank you!
Ideally you would want to copy that _settings.scss file into your sass architecture. Once copied over, edit it how you would please.
Then import that settings file before the foundation components in your main compilation file so that they will use those settings. This is an example of some code I've written in the past.
// Reset css.
#import "../../../bower_components/foundation/scss/normalize";
// This is the file you created for foundation settings.
// Now all the imported foundation components will use these settings.
#import "./base/settings";
// Make sure the charset is set appropriately
#charset "UTF-8";
// Behold, here are all the Foundation components.
#import "../../../bower_components/foundation/scss/foundation/components/grid";
#import "../../../bower_components/foundation/scss/foundation/components/accordion";
#import "../../../bower_components/foundation/scss/foundation/components/alert-boxes";
#import "../../../bower_components/foundation/scss/foundation/components/block-grid";
#import "../../../bower_components/foundation/scss/foundation/components/buttons";
#import "../../../bower_components/foundation/scss/foundation/components/clearing";
#import "../../../bower_components/foundation/scss/foundation/components/dropdown";
#import "../../../bower_components/foundation/scss/foundation/components/dropdown-buttons";
#import "../../../bower_components/foundation/scss/foundation/components/forms";
#import "../../../bower_components/foundation/scss/foundation/components/inline-lists";
#import "../../../bower_components/foundation/scss/foundation/components/labels";
#import "../../../bower_components/foundation/scss/foundation/components/pagination";
#import "../../../bower_components/foundation/scss/foundation/components/progress-bars";
#import "../../../bower_components/foundation/scss/foundation/components/range-slider";
#import "../../../bower_components/foundation/scss/foundation/components/reveal";
#import "../../../bower_components/foundation/scss/foundation/components/split-buttons";
#import "../../../bower_components/foundation/scss/foundation/components/switches";
#import "../../../bower_components/foundation/scss/foundation/components/tables";
#import "../../../bower_components/foundation/scss/foundation/components/tooltips";
#import "../../../bower_components/foundation/scss/foundation/components/type";
#import "../../../bower_components/foundation/scss/foundation/components/visibility";
I try to customize the bulma default colors. I have installed node-sass and it appears to be working and in my root scss file ive written the script
#import '../node_modules/bulma/sass/utilities/initial-variables.sass';
$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;
#import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;
#import '../node_modules/bulma/css/bulma.css'
However this does not appear to be changing the primary color in my project or the primary font choice. Ive imported this file into my index.js file on react and bulma is definitely working just not accepting my customizations.
Update: here is the link to the bulma docs describing how to do this
http://bulma.io/documentation/overview/customize/ I tried it that way with no success as well
I think your .scss file looks good, though you don't need to include the .sass extension (it looks like you're writing .scss, not .sass, anyway so I'd remove it.)
The main thing is you need to include a build process that will transform the scss to css. See this part of the CRA docs.
Basically in your package.json scripts:
json
"build:css": "node-sass ./src/scss/main.scss ./build/main.css",
"build:css:watch": "npm run build:css -- -w",
My script above is putting the css in build folder and I'm using a link tag in index.html, but you could build and import as well.
Hey guys after taking the advice above I reconfigured the package json. Another side note I changed my source sass script to this
#import '../node_modules/bulma/sass/utilities/initial-variables.sass';
$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;
#import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;
#import '../node_modules/bulma/bulma.sass'
You have to point your scss or sass file to the bulma.sass not the bulma.css file since your wanting to create a new build of the bulma.css file other than the one that comes packaged with it
Cheers
In scss I would usually add other scss files using the #import command.
With sencha cmd the SCSS file for my ExtJS app is generated.
Where and how do I add custom styles which then should be compiled into the app-all.css?
I don't want to create a custom theme (because I think that's an overkill)
I am using the default Classic theme, ExtJS 4.2 with Sencha Cmd 3.1.2
I see $include variables in the generated app-all.scss but there are no #imports for my custom scss files
generated appName-all.scss
...
$include-ext-window-messagebox: true;
$include-ext-window-window: true;
$include-appname-app-application: true;
$include-appname-controller-customer: true;
$include-appname-view-listings-index: true;
...
#import '../../../packages/ext-theme-classic/sass/var/window/MessageBox';
#import '../../../packages/ext-theme-classic/sass/var/window/Window';
...
#import '../../../packages/ext-theme-classic/sass/src/window/MessageBox';
#import '../../../packages/ext-theme-classic/sass/src/window/Window';
...
I've put my custom scss files into the existing appName/sass/src folder like this:
appname/view/listings/Index.scss
Unfortunately this seems to be ignored, when executing sencha app build..
How do I configure Sencha Cmd to include my custom scss files when generating appname-all.scss?
Oh wow.. just read my own question and had the idea that actually my folder structure is not really the same as extjs native structure (theme/sass/src vs sass/src/appName)
moving my Index.scss to appName/sass/src/view/listing/Index.scss solved the problem totally :)
new appName-all.scss after sencha app build
/* including package appName */
$branchenbuchAdmin-resource-path: 'images' !default;
$relative-image-path-for-uis: $appName-resource-path;
#import '../../../apps/appName/sass/src/view/listings/Index';
Loving it :)