Voisinkohan kopioida täältä omaan foorumiini WordPress-vinkkejä? Laittaisin vaikka otsikoksi Saamiani WordPress-vinkkejä.
Omasta puolestani saat kopioida niin paljon kuin huvittaa, kunhan jätät lähdeviittauksen ja nimimerkkini pois.
Voisiko vähän selittää SASS ideaa. Tuntuu vain melkoisen turhalta lisältä.Jos pitää voida vertailla SASS-koodia ja lopullista CSS:ää, silloihan ei teeman CSS:ään saisi koskea. Se ei oikein tunnu mielekkäältä. Jos teeman CSS:n olisin jättänyt, olisi hirveän paljon turhaa CSS:ää ja todella paljon uudelleen määrittelyjä. Siinä viimeistään olisi vaikea hallita kokonaisuutta. Turhaa CSS:ää on toki vieläkin, mutta paljon sitä poistin.
Onko millään mahdollista päästä eroon valituksesta, että map-tiedistoa ei saada luotua tai sitä ei löydy? Kai SASS-vertailun voisi jotenkin kokonaan ohittaa?
SASS:ia käyttämällä saat organisoitua koodin paremmin vaikka eri tiedostoihin, voit käyttää muuttujia (esim. värien määrittelyyn), luoda erilaisia uudelleenkäytettäviä komponentteja (Mixins), tehdä laskutoimituksia (sekä väreille, että mitoille) ja paljon muuta. SASS on oikeasti kätevä, kun siihen vähän syventyy. Katsele
täältä nuo esimerkit lävitse, noissa on kivasti rinnakkain SASS ja käännöksestä syntyvä CSS, niin päässet hieman kärryille mahdollisuuksista.
SASS:ssa idea onkin, että et sen jälkeen enää ikinä koske käsin varsinaiseen css-koodiin.
Se, että selaimen dev-konsolissa näkyy tuo map- virheilmoitus on vain kosmeettinen ongelma. Selain ei normaalisti sivuja ladatessa noita .map tiedostoja yritä ladata, ainoastaan silloin kun avaat dev-konsolin. Toki siitä eroonkin pääsee, jossain selaimen dev-konsolin asetuksissa on mahdollisuus kieltää .map tiedostojen lataus. Mutta jatkoa ajatellen tuota ei kannata tehdä.
Käyttämäsi Screenr teeman tekijät ovat näköjään senverran mukavaa porukkaa, että jakavat teeman SASS kooditkin. Teepä nopea harjoitus, mieluusti sivuston kopioon (ota varmuuskopiot ensin!)
1. Kopioi
screenr/assets/sass/ hakemiston sisältö aliteemaasi
screenr-child/assets/sass/ hakemistoon.
2. Muokkaa tiedostoa
screenr-child/assets/sass/style.scss poista tiedoston alusta Screenr:n omat teeman kuvauskommentti ja lisää tilalle aliteeman tiedot:
Koodi:
/**
Theme Name: Screenr Child Theme
Version: 1.2.3
Template: screenr
*/
Pienen yhteensopivusongelman takia pitää muokata vielä paria muutakin tiedostoa:
screenr-child/assets/sass/_variables.scss noin riviltä 130 lähtien, korvaa mixin tällä versiolla:
Koodi:
@mixin rem($property, $px-values) {
$baseline-rem: $baseline-px;
#{$property}: $px-values;
@if type-of($px-values) == "number" {
#{$property}: $px-values / $baseline-rem + rem; }
@else {
$rem-values: unquote("");
@each $value in $px-values {
@if $value == 0 {
$rem-values: append($rem-values, $value + rem); }
@else {
$rem-values: append($rem-values, $value / $baseline-rem + rem); } }
#{$property}: $rem-values; }
}
Tiedostossa
screenr-child/assets/sass/_sections.scss noin rivillä 371 poista välilyönti miinusmerkin jälkeen.
@include rem('margin-left', - (60px / 2) ); =>
@include rem('margin-left', -(60px / 2) );
3. varmista, että lapsiteeman functions.php:ssa on koodit:
PHP:
add_action('wp_enqueue_scripts', function(){
wp_dequeue_style('screenr-style');
}, 99);
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('screenr-child', get_stylesheet_directory_uri() . '/style.css', [], wp_get_theme()->get('Version') );
}, 10);
4. Asenna lisäosa
wp-scss ja lisäosan asetukset näin:
5. Lataa etusivu uudelleen.
Nyt pitäisi tapahtua seuraavaa:
screenr-child/style.css generoituu uudelleen sass koodista käännettynä. Samalla syntyy
style.css.map tiedosto. Nyt kun avaat selaimessa devel toolin, ei sen enää pitäisi valittaa puuttuvasta .map tiedostosta ja dev-konsolin css- viitteet kertovat missä scss tiedostossa ja millä rivillä näytettävä css koodi on.
Tämä tietysti hävittää kaikki style.css tekemäsi muutokset ja joudut ne tekemään uudelleen, mutta tällä kertaa teetkin ne tuonne assets/sass/ alla oleviin tiedostoihin. wp-scss lisäosan Compiling modea vaihtamalla saat määritettyä minkälaista css koodia scss tiedostoista synnytetään. Tuotannossa 'Crunched' ja devaillessa 'Expanded'
