Adding custom CSS via scss/sass


#1

I’d like to document my process here, so please feel to point out anything I’m doing wrong.

I first read Customizing Ionic with sass, I believe some parts of it are not 100% up to date, but I figured ways around those barriers. Here is what I ran into:

The structure for a new project is not quite like this, and the mismatched names are confusing. Here is what is on the page:

  - my_app
  - hooks
  - plugins
  - scss
  - www
    - css
    - fonts
    - js
    - lib
      - ionic
        - css
        - js
        - sass
    - templates

The only difference here is that the sass folder inside www/lib/ionic/ is actually called scss now.

The second and more irritating issue was getting sass to “watch” my file once set up. The ionic.app.scss file was placed into the scss/ dir and inside the file the import line:

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

Should be:

// Include all of Ionic
@import "../www/lib/ionic/scss/ionic";

To proceed without errors when running the command sass --watch scss/ionic.app.scss:www/css/app.css from the top dir.

Anyways I’m new to scss/sass and I’d like to add my own customization, but the article also mentions to not alter the _foo files if you can help it, and only alter your ionic.app.scss file to override things. Well, I’d like to add my own custom variables and change things in my app all around but I’m not sure how…

As an example I will use the buttons inside a header bar, because that’s something I’d like to customize even further than the defaults allow. In my example I’d like to change the appearance of the positive series of buttons inside the header bar when they are tapped. Currently in the _variables.scss file, I have the following properties to modify:

$button-positive-bg: $positive !default;
$button-positive-text: #fff !default;
$button-positive-border: darken($positive, 15%) !default;
$button-positive-active-bg: darken($positive, 15%) !default;
$button-positive-active-border: darken($positive, 15%) !default;

But I’d like the change the color of the text when the button is active as well, which means I need to add a active-text in there somewhere. So how do I go about adding a new variable to this stuff?

Do I want to make a variable called $button-positive-active-text inside _variables.scss? If I do that, do I need to modify _bars.scss as well or some other _foo file? If I add the variables to all these files, do I have to worry about the mapping? How does sass now know what’s going on once I change these files?

An article on doing full customization would be amazing of course, I’d even be happy to write a post, but any help appreciated.


#2

Bump, any guidance here?


#3

So that page is a little out of date.
Here is a more up to date doc on scss customization.

http://learn.ionicframework.com/formulas/working-with-sass/


#4

Thanks for the link Mike, I checked it out and still have questions! I guess I am really only interested in the section entitled “Custom Scroll Background”.

On your article I know a lot of it may seem very easy and implicit for you, but that section is the most confusing for me because I don’t know how to do it. I understand creating a custom variable, but where do I that? Inside the ionic.app.scss file in scss/?

Once I’ve made my variable up, where do I then place the class that goes with it? Is that inside of my www/css/style.css? I can’t add it to my auto-generated css file made by sass because it gets overwritten constantly.

Once I’ve made my variable and class, how do I get sass to notice my new class and do I have to worry about what I’ve made getting added to the auto-generated css? For instance, I just want to make my own variable that controls text-size inside the positive button, could you write a step-by-step on how to do that? Maybe just call it adding custom variables to sass/ionic?

Or tell me here and I’ll write it! It’s just that a lot of things aren’t clear. Thanks!


#5

Visuals may help here…

So lets start from square one…

  1. make a project.
ionic start tmp & cd tmp
  1. setup the sass build tools for the project
ionic setup sass
  1. edit the ionic.app.scss file in the scss/ directory of the project root.
vim scss/ionic.app.scss

With the gulp task, gulp sass or actually having ionic serve running, the changes in that scss file will be noticed and updated.


#6

Ok cool, will try this, thank you!


#7

This does not work for me.
Indeed the ionic serve registers all changes I make to the scss/ionic.app.scss file, but it does not have an effect in the browser! I think the variables in the scss/ionic.app.scss do not get implemented in the compiled css.
I tried exactly the steps you mentioned, with a new project, etc. But it does not work.
Is there a known bug with sass atm?


#8

Where are you placing the variables in the scss file?
Is your project setup for sass?

What steps did you follow?


#9

My fault. Managed to do it now.
Problem was that I put my custom line like

$stable:                          #FF0000 !default;

after

@import "www/lib/ionic/scss/ionic";

but it has to be before. (Obviously.)
Thanks for caring!


#10

I have gulp sass and I’ve watched the video three times, as well as just copy and pasting the code from the “Writing a Sass Theme” tutorial to try to get a background image and my code still doesn’t work. Everything is installed and I am only working in the ionic.app.scss file and .html file.

I am new to ionic and scss and I really think these tutorials need a little more detail!

Thank you in advance


#11

This link redirects to: http://ionicframework.com/getting-started/

Please provide a new link.


#12

hi, its easy, check your ionic.config.json and you see the entry watchPatterns there you need to add the entry scss/**/* the watch deamon was only ignoring the folder where the docs says that you may put your scss’s je


#13

After run ionic serve I opened another command prompt and run gulp in the same project folder. It worked for me. But I always have to run gulp after finishing the changes in scss file :neutral_face:


#14

can u give me the code of csv upload to mysql server