So I've recently set-up a new project using Zurb's Foundation. I've got the default setting working from the gem setup (http://foundation.zurb.com/docs/sass.html).
The problem I am having is amending the buttons. By default my buttons appear square & I want a nice rounded corner style. So within the _settings.scss I have amended the following line:
$button-radius: 30px;
But nothing happens. So after reading the documentation I tried creating my own button class and including the button mixin like so:
.your-class-name {
#include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}
But when I do this I get an error saying that $padding doesn't exist! This has royally confused me as it's used throughout Foundation (or so I understand).
Can anyone suggest what may be going wrong here. I can provide any additional information if need be.
Lastly, I don't think the $global-radius option is being applied, because when I change the property but it's not causing an error so I'm a little stumped!
EDIT:
Here is the top of my core SASS file:
// Global Foundation Settings
#import "settings";
// Comment out this import if you don't want to use normalize
#import "normalize";
// Comment out this import if you are customizing you imports below
#import "foundation";
The default $border-radius did not work due to a bug in Foundation. I ran into it as well, but when I now went to double-check, it appears to have been fixed already in this commit. The problem was that $button-radius was defined twice in the settings file, one for buttons in general, and one for buttons in forms. The latter has now been renamed to $form-button-radius.
Related
We have Webpack for our project and we need to customize a great amount of things. I.E. we need to create our own theme. According to the docs, I should have:
#import 'theme/_import';
#import '~uikit/src/scss/variables';
#import '~uikit/src/scss/mixins';
#import "~uikit/src/scss/uikit";
Where the theme folder is a copy of uikit/src/scss/theme. However, I get an error:
Undefined variable: "$global-muted-background".
So what should I do in this situation?
Did I rightfully copy that theme folder? Is it meant for copy-paste and then modification? If yes, what do I import before that folder so that the necessary variables are declared?
Should I copy the whole variables-theme.scss file and modify it instead? In that case, what's the purpose of splitting each component's variables into files, as the docs suggest? Also, everything would be a mess.
Where should I put my custom global variables? In theme/variables and then import them in theme/_import?
I am looking at the Theme Guide
It informs me that there are several prebuilt themes available:
#import '#angular/material/prebuilt-themes/deeppurple-amber.css'; is one.
Where do these themes come from?
My problem stems from trying to create my own theme. If for example, I follow the excellent angular-ngrx-material-starter black-theme.scss, then I appear to not define enough colours. My mat-select is unstyled.
I need to add one of the prebuilt themes above in order to get a full theme, but now I have purples in my theme and a general miss match of colours which I don't want. Clearly I am missing the full range of colours in my theme.
I feel that if I could see the "source" of a pre-built theme, I might have some idea how to make my own.
Would anyone be able to shine a light on this for me?
Shot Answer
Answer for you if your angular project is using scss. The colours are surely there if you are using a default palate from the angular material module like the example you gave above. You probably just did not add the overlay themes. Mat-select is an overlay
In your main
main.scss
#import '../node_modules/#angular/material/theming';
$anms-black-primary: mat-palette($mat-grey, 700, 300, 900);
$anms-black-accent: mat-palette($mat-blue-grey, 400);
$anms-black-warn: mat-palette($mat-red, 500);
$anms-black-theme: mat-dark-theme(
$anms-black-primary,
$anms-black-accent,
$anms-black-warn
);
#include angular-material-theme($anms-black-theme);
.whatever-theme {
#include angular-material-theme($anms-black-theme);
}
app.component.ts
export class AppComponent {
constructor(overlayContainer: OverlayContainer) {
overlayContainer.getContainerElement().classList.add('whatever-theme');
}
}
Prebuilt themes are just generated by compiling the scss file. Most of theme variables and functions are in node_modules/#angular/material/_theme.scss
Example
$(npm bin)/node-sass $FILE > $DEST_PATH/$BASENAME.css
Long Answer
To understand themes in angular you got to have a basic understanding of scss which is the default way to generate themes in angular.
https://sass-lang.com/guide
To have a good example of scss styling in a proper angular project will be the material docs repo. https://github.com/angular/material.angular.io.
In node_modules/#angular/material/_theming.scss you can see how the theme variable are defined and define custom themes on your own.
A good answer for creating custom themes.
How can I use custom theme palettes in Angular?
I'm trying to suppress a specific error that is related to a SASS file in Visual Studio. I'll mention that everything works great, the CSS file is generated exactly as the SASS files should generate it, and even with this error on VS, so I think maybe it's a bug on VS.
Basically what I'm doing is that I have 2 SASS files that I declare some variables in them as settings for another SASS file that contains some mixins that work according to the settings file that provided in the context.
For exmaple, these are the 2 files for the settings:
_settings-ltr.scss
$bi-app-left: left;
$bi-app-right: right;
_settings-rtl.scss
$bi-app-left: right;
$bi-app-right: left;
And this is the file that uses those settings:
_mixins.scss
#mixin padding-left($distance) {
padding-#{$bi-app-left}: $distance;
}
#mixin padding-right($distance) {
padding-#{$bi-app-right}: $distance;
}
Now, basically the error says that the variable "$bi-app-left" is undefined (and "$bi-app-right" as well), and I'm really not defining these variables in the "_mixins.scss" file, I pass them to the context in some other SASS file, like this:
site.scss
#import '_settings-ltr.scss';
#import '_mixins.scss';
And it works great, except that error from VS:
My Question
How can I disable this error specifically, without disabling other SASS file errors?
This is because of how the VS SCSS editor resolves variables. It does so from the perspective of the file being edited; because the SCSS editor instance for _mixins.scss does not know how the imports are resolved in site.scss, it doesn't have a way to resolve this reference. If _mixins.scss had an #import chain up to the _settings-ltr.scss (or -rtl), then it would be able to resolve the variable and the error wouldn't be shown.
Similar feedback has been raised here as well. It would be worth opening a new feedback item to better describe the scenario (and also what you're using to compile SCSS, e.g. if you're using WebPack) so the team can prioritize this as a design change. It won't get addressed right away, but we do take the number of feedback items into account for prioritizing the backlog. (And I'd love to have more ammunition to make this feature a priority...)
Currently, there isn't a way in VS to disable a specific SCSS error. This could be another feature request, but it would be a low priority to implement.
I have activated intellisense for files declared elsewhere by referencing the main file (i'll name it mainfile at my example) that imports all the other using /// <reference path="./../mainfile" />.
The code should change depending on the nesting of the mainfile (replace with the name of your own starting file that imports everything else).
Also the difference between the scss file you are adding it. For instance for two folders deep ./.. for three ../.. and so on.
Another example. I usually name my starting file main and all scss files are two - three folder deep.
../../main
./../main
Sadly i did not find a dynamic way to reference the path based on unknown members of files. Also that line has to be added to every single file.
The solution above offers intellisense which sorts the error and you can see the values on hover, go to definition etc as well.
Today I've started using ionic 3 for the first time. I don't really know anything about it, so that's why I wanna learn how it works.
I've created a sidemenu project and now I want to add some global styling in my app.scss, so I can use it in any page of my project. Well, I've added simple styling to my app.scss but nothing happens on my page. Everything still looks the same. Now my question is: Do I have to import the app.scss somewhere? If so, where? Or how can I use the app.scss?
I thought it would happen automatically, that my page uses also the classes of my app.scss and not only of it's own stylesheet, but to me it seems like it doesn't even know the classes of the app.scss.
within the app.scss you can create class use them normally as class="class-name" on html.
Hope I helped you.
You can just use it, no need to import it anywhere. A few things to keep in mind though:
There are things you would like to add at a global scope like for example if you want to enable newlines in toast messages you add the following:
.toast-message {
white-space: pre-line;
}
If you want to add something only for iOS you add it as a sub element of the ios class:
.ios {
... // your iOS-specific css rules
}
If you want to add somehing only for Android (material design) you add it as a sub element of the md class:
.md {
... // your android-specific css rules
}
An there is also a wp class for windows phone if you should need it.
Make sure you have a look at ionics theming docs.
I have a scss file that I call in
#import ..mixins
but when I try to call in methods from the mixin that is defined like this
#mixin myFunction($param1, $param2){
style:$param1
style:$param2
}
Phpstorm just gives a hint like
myFunction()
without any parameter information. Has anyone found any solutions to this?
Unfortunately it's not yet supported in current versions on PhpStorm/WebStorm (stable 2016.3 and upcoming 2017.1).
Watch these tickets (star/vote/comment) to get notified on any progress:
https://youtrack.jetbrains.com/issue/WEB-10806
https://youtrack.jetbrains.com/issue/WEB-24715
I came here searching for this myself, and it isn't supported even in 2018.
It's not going to give you hinting apparently, but, for often used mixins you can create a live template (snippet) with variables.
In your case:
1) - Navigate to Settings: File>Settings>Editor>Live Templates. Then click the '+' to add a new 'snippet'.
#mixin myFunction($$param1$, $$param2$);
The extra $ are for naming vars in Live Templates.
OR,
2) - Highlight the snippet of code to use for a new Live Template. Then press CTRL(CMD)-SHIFT-A and search "Save As Live Template". Double click or press enter to do '1)' much quicker if the code is already present.
That's a dirty workaround in the meantime.
What PHPStorm does support is: when you #include myMix, the hint will expand if you use the up, down arrows. Still not hinting, but almost.