Created
July 10, 2014 16:21
-
-
Save jimthedev/2b88e932822f89ccbc07 to your computer and use it in GitHub Desktop.
How to implement customized SCSS/SASS after creating a project with ionic generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* | |
* PATH TO THIS FILE: app/styles/_my-sweet-directive.scss | |
* | |
* Notice that here we define styles but do not define variables. | |
* Variables should all be defined ahead of time. If we define any | |
* variables here, then they will be local to this file, and will | |
* not reset the globals. | |
**/ | |
my-sweet-directive, .my-sweet-directive { | |
background: $calm; | |
color: $myPrettyColor; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* | |
* PATH TO THIS FILE: app/styles/_variables.scss | |
* | |
* In this file we're smoothly overriding any ionic variables that have | |
* existing defaults inside the framework variables file. We're also defining | |
* our own variables that we can use in our app's components. Essentially we're | |
* setting the global variables for our app here. | |
* | |
* For a list of the possible variables that you can override, see bower_components/ionic/scss/_variables.scss | |
* | |
* Note: we add !default to all variables so that they can be overridden later on if need be. | |
* | |
**/ | |
// Ionic variables to override | |
$calm: #4cbfeb !default; | |
$balanced: #8dcb00 !default; | |
// My own variables to be used in my components, notice that we can also depend on other variables here. | |
$myPrettyColor: #ffcc00 !default; | |
$myOtherPrettyColor: lighten($balanced, 20%) !default; | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// PATH TO THIS FILE: root of your project | |
// | |
// Edit your Gruntfile.js file's bower install section to exclude ionic's css | |
// as shown below. This is just a snippet so you need to find this section. | |
// If you don't do this, then you'll get ionic in CSS precompiled form | |
// in addition to your custom scss build and everything will break. | |
// Automatically inject Bower components into the app | |
'bower-install': { | |
app: { | |
html: '<%= yeoman.app %>/index.html', | |
ignorePath: '<%= yeoman.app %>/', | |
exclude: ['bower_components/ionic/release/css/ionic.css'] | |
} | |
}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* | |
* PATH TO THIS FILE: app/styles/main.scss | |
* | |
* This includes all variables. We put them all (both ionic overrides and | |
* our own variables) in one file so it is easy for anyone who @includes | |
* our scss to locate and edit our variables. | |
* | |
**/ | |
@import "_variables"; | |
/** | |
* | |
* This includes the SASS/SCSS version of the ionic framework so that we can | |
* customize it by overriding it's variables. To use this we need to make sure | |
* that the CSS version is not included in app/index.html | |
* | |
**/ | |
@import "../../bower_components/ionic/scss/ionic"; | |
/** | |
* | |
* These are the actual components of our apps that consume variables. We can | |
* override ionic's own styles here or add additional styles of our own. | |
* | |
**/ | |
@import "_my-sweet-directive"; | |
@import "_my-other-sweet-directive"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for posting. This helped me out a lot!