預處理器sass_Sass — Web的預處理器裝飾

預處理器sass

美學的重要性,其影響以及實現這一目標的工具。 (Importance of aesthetics, its impact, and tool to achieve it.)

I remember as a child, every time I’d walk up to a bakery, I’d choose the pastries with the most beautiful toppings. Only after having the first bite would I know if it was the one I was longing for.

我記得小時候,每次去面包店時,我都會選擇澆頭最漂亮的糕點。 只有在第一口被咬之后,我才知道這是否是我所渴望的。

A well-plated dish can trump taste at times. The tendency to pick on appearance has a significant impact on our choices. This inclination towards plating is not only confined to food. Trendy clothes, a decorated apartment, and a well-designed car are a few examples.

鍍好的盤子有時會勝過口味。 選擇外觀的趨勢對我們的選擇有重大影響。 這種對鍍層的傾向不僅限于食品。 例如,時髦的衣服,裝飾精美的公寓和精心設計的汽車。

A master chef understands the importance of presentation for a successful restaurant. The art of garnishing can differentiate a culinary masterpiece from a novice’s plate. Moreover, a creative plating would add pleasure and taste, encouraging customers to pay frequent visits. The web is no different from any gourmet meal in this sense. Visual impact has had a crucial role in all successful web applications, too.

大廚了解演示對于成功餐廳的重要性。 裝飾藝術可以將烹飪杰作與新手盤子區分開。 此外,創造性的電鍍將增加樂趣和品味,鼓勵顧客進行頻繁的拜訪。 從這個意義上講,網絡與任何美食都沒有什么不同。 視覺影響在所有成功的Web應用程序中也都起著至關重要的作用。

You need to make significant efforts to make web applications look pleasant. This is where Cascade Style Sheets (CSS) come in.

您需要付出巨大的努力才能使Web應用程序看起來令人愉悅。 這是Cascade樣式表(CSS)出現的地方。

As the web evolves, applications grow bigger and bigger. To match our needs, we need more from CSS out of the box. But CSS has some limitations.

隨著網絡的發展,應用程序越來越大。 為了滿足我們的需求,我們需要開箱即用CSS。 但是CSS有一些限制。

Since you’re reading this article, you’ve already finished the toppings, and now is the time to taste the rest of the cake. Let’s see what limitations CSS has and how we can overcome them. The goal is to take your plating technique to the next level.

自從您閱讀本文以來,您已經完成了澆頭,現在是時候品嘗其余的蛋糕了。 讓我們看看CSS有哪些局限性以及如何克服它們。 目標是使您的電鍍技術更上一層樓。

先決條件 (Prerequisites)

You need to have a fair understanding of CSS and CSS selectors. You’ll also need Node.js and npm installed.

您需要對CSS和CSS選擇器有一定的了解。 您還需要安裝Node.js和npm。

CSS限制 (CSS Limitations)

Identifying limitations is subjective, though I would like to mention a few.

確定局限性是主觀的,盡管我想提及一些。

  1. Programming mechanism: Features like variables, functions, classes, and operators are missing in CSS3 itself.

    編程機制:CSS3本身缺少諸如變量,函數,類和運算符之類的功能。
  2. Lengthy CSS file: In rich user interface applications, style sheets may grow overnight. Large files can be a nightmare for maintenance.

    冗長CSS文件:在豐富的用戶界面應用程序中,樣式表可能會在一夜之間增長。 大文件可能是維護的噩夢。
  3. Absent math operators: Math operators like +, -, *, / can be very handy at times.

    缺少數學運算符:有時+-*/等數學運算符會非常方便。

To overcome such limitations, we have preprocessor scripting languages.

為了克服這些限制,我們提供了預處理器腳本語言。

預處理器 (The preprocessor)

A Preprocessor is a piece of software which takes an input file written in some programming language and processes it to produce a file following syntax of another language. It is used to extend the syntax of an existing programming language by adding new functionality to it.

預處理器是一種軟件,它接收以某種編程語言編寫的輸入文件,并根據另一種語言的語法對其進行處理以生成文件。 它通過添加新功能來擴展現有編程語言的語法。

A CSS preprocessor extends the CSS syntax by adding a programming mechanism to it. SassScript is a superset of CSS. When compiled, it creates valid CSS blocks for your web applications.

CSS預處理器通過添加編程機制來擴展CSS語法。 SassScript是CSS的超集。 編譯后,它將為您的Web應用程序創建有效CSS塊。

There are a few CSS preprocessors available like Less, Stylus, and Sass. Our focus will be on Sass ( Syntactically-awesome style sheets). But the concept is more or less the same for other preprocessors.

有一些CSS預處理器可用,例如Less,Stylus和Sass。 我們的重點將放在Sass(語法上很棒的樣式表)上。 但是其他預處理器的概念大致相同。

We will go through the installation of a Node.js Sass compiler, and later we’ll see various Sass features in action. So, get ready to garnish your delicious web recipes ?.

我們將完成Node.js Sass編譯器的安裝,稍后我們將看到各種使用中的Sass功能。 因此,準備裝飾您美味的網絡食譜嗎?。

準備薩斯 (Preparing Sass)

Sass was first written in Ruby and then in other languages. You can choose from many available implementations. For this article, we will stick to a Node.js package — node-sass. This package uses high-performance Sass implementation in C called libSassSass.

Sass首先是用Ruby編寫的,然后是其他語言的。 您可以從許多可用的實現中進行選擇。 對于本文,我們將堅持使用Node.js包— node-sass 。 該軟件包使用稱為libSassSass的C語言中的高性能Sass實現。

First things first: Let’s install node-sass. Then we will set up a sample application to see various Sass features in action. Open a terminal on your machine and execute the below command.

首先,首先:安裝node-sass。 然后,我們將建立一個示例應用程序,以查看運行中的各種Sass功能。 打開計算機上的終端,然后執行以下命令。

npm install node-sass -g

Here we are asking node package manager to install node-sass for us. With flag -g, we installed the package globally. Great! Once it finishes, make sure everything is in place.

在這里,我們要求節點軟件包管理器為我們安裝node-sass 。 使用標志-g ,我們全局安裝了該軟件包。 大! 完成后,請確保一切就緒。

node-sass -v

Okay! We have all the ingredients we may need. Let’s see what flavors Sass comes with, and afterward we will start our journey to explore Sass.

好的! 我們擁有所有可能需要的成分。 讓我們看看Sass帶有什么口味,然后我們將開始探索Sass的旅程。

各種口味的薩斯 (Various flavors of Sass)

There are two ways of creating a Sass file. You can use either of these two syntaxes.

有兩種創建Sass文件的方法。 您可以使用這兩種語法中的任何一種。

  1. Sass style: This syntax uses indentation to separate code blocks and new lines.

    Sass樣式:此語法使用縮進來分隔代碼塊和換行。
  2. SCSS style: This syntax uses blocks like a programming language. We’ll use SCSS syntax in this article.

    SCSS樣式:此語法使用類似于編程語言的塊。 我們將在本文中使用SCSS語法。

Note: It’s possible to convert from one syntax to another by a simple Sass convert command. Feel free to adopt the one you like.

注意:可以通過一個簡單的Sass convert命令將一種語法轉換為另一種語法。 隨意采用您喜歡的一種。

準備主菜 (Preparing the main dish)

As we are Sass-ready on our machine, we can start playing around to see what great features it can bring to us. Follow along with me to set up a sample application.

當我們準備好在機器上使用Sass時,我們可以開始玩轉,看看它可以為我們帶來什么出色的功能。 跟著我建立示例應用程序。

Here I am using Visual Studio Code. You can use any code editor of your choice. I have been using it for a long time and I would recommend it. It has some cool productivity plugins that can be of great help.

在這里,我正在使用Visual Studio Code 。 您可以使用任何選擇的代碼編輯器。 我已經使用了很長時間了,我會推薦它。 它有一些很棒的生產力插件,可以提供很大的幫助。

So far, we have created a folder and two files.

到目前為止,我們已經創建了一個文件夾和兩個文件。

  1. index.html: an HTML file.

    index.html:一個HTML文件。
  2. style.scss: root (or main) Sass script file.

    style.scss:根(或主)Sass腳本文件。

To start, let’s create a div, an h1, and two buttons in the HTML file.

首先,讓我們在HTML文件中創建divh1和兩個button s。

Let’s iterate through the most used Sass features. On the way, we will also see the compiled CSS blocks.

讓我們遍歷最常用的Sass功能。 在路上,我們還將看到已編譯CSS塊。

變數 (Variables)

Variables help you centralize CSS properties. You can assign them once at the top of a file and use them throughout the file. These variables are like placeholders for a CSS property’s value. In Sass, a variable name must start with a $ sign.

變量可幫助您集中CSS屬性。 您可以在文件頂部分配一次它們,并在整個文件中使用它們。 這些變量就像CSS屬性值的占位符。 在Sass中,變量名必須以$符號開頭。

We are going to create two variables: $h1-color and $h1-height. Then we will use these variables to assign color and height properties to an h1 element. Below is the Sass snippet.

我們將創建兩個變量: $h1-color$h1-height 。 然后,我們將使用這些變量將顏色和高度屬性分配給h1元素。 下面是Sass片段。

$h1-color     : blue;
$h1-height    : 50px;
h1{color  : $h1-color;height : $h1-height;
}

All right! We have an HTML file and a Sass file so far. What about the CSS file? It hasn’t appeared yet.

行! 到目前為止,我們有一個HTML文件和一個Sass文件。 那CSS文件呢? 它還沒有出現。

Well, we are almost there. Open your terminal to go to the folder we created and execute the command below:

好吧,我們快到了。 打開終端,轉到我們創建的文件夾,然后執行以下命令:

node-sass style.scss style.css

The parameters for the node-sass compiler are input and output file path. Now if you open the HTML we created during project setup in a browser, you should see the following.

node-sass編譯器的參數是輸入和輸出文件路徑。 現在,如果您在瀏覽器中打開我們在項目設置過程中創建HTML,您將看到以下內容。

Notice that the CSS file is already included in the HTML’s headsection.

注意,CSS文件已經包含在HTML的head部分中。

經營者 (Operators)

Mathematical operators were always missed in CSS. Sass provides basic math operators like addition +, subtraction -, multiplication * and division/.

在CSS中始終缺少數學運算符。 Sass提供基本的數學運算符,例如加法+ ,減法- ,乘法*和除法/

You can use variables and operators together to manipulate CSS properties. Let’s take an example. We can use operators to calculate padding for an h1 element depending upon the width of its parent div. We will use the divide operator / for this example.

您可以一起使用變量和運算符來操縱CSS屬性。 讓我們舉個例子。 我們可以使用運算符根據其父div的寬度來計算h1元素的填充。 在此示例中,我們將使用除運算符/

$h1-color   : blue;
$h1-font    : 50px;
$div-width  : 500px;
div{width: $div-width;
}
h1{color       :  $h1-color;height      :  $h1-font;padding     :  $div-width / 10;
}

混合蛋白 (Mixins)

Mixins are like abstract base classes. Mixins are handy to group related properties. Once created, these mixins can be reused in the rest of the style blocks. Moreover, you can even pass variables. Confusing? Let’s take an example.

Mixins就像抽象基類。 Mixins易于分組相關屬性。 一旦創建,這些混入就可以在其余樣式塊中重用。 而且,您甚至可以傳遞變量。 令人困惑? 讓我們舉個例子。

You must have noticed that creating a style for border-radius is always quite messy. For cross-browser support, we must use vendor-specific properties. However, with mixins, it can be super easy. Let’s see it happen.

您必須已經注意到,為邊框半徑創建樣式總是很混亂。 為了獲得跨瀏覽器的支持,我們必須使用特定于供應商的屬性。 但是,使用mixins可以非常容易。 讓我們看看它發生了。

@mixin border-radius($radius){-webkit-border-radius   : $radius;-moz-border-radius      : $radius;-ms-border-radius       : $radius;border-radius           : $radius;
}
div{width    : $div-width;border   : 2px solid grey;@include border-radius(20px);
}

Here we used the @mixin directive to define a mixin named border-radius. This mixin contains all the possible properties to set the radius of a border. We also passed a parameter to this mixin. Whenever you need to set the radius of an element, include this mixin with the @include keyword.

在這里,我們使用@mixin指令定義了一個名為border-radius的mixin。 此混合包含所有可能的屬性,用于設置邊框的半徑。 我們還向該mixin傳遞了一個參數。 每當需要設置元素的半徑時,都可以在@include關鍵字中包含此mixin。

Compile the script once again to generate the CSS. How does it look now?

再次編譯腳本以生成CSS。 現在看起來如何?

//Processed CSS output
div {width: 500px;border: 2px solid grey;-webkit-border-radius: 20px;-moz-border-radius: 20px;-ms-border-radius: 20px;border-radius: 20px; 
}

套料 (Nesting)

HTML elements have a logical tree-like structure with nested elements. To write structured CSS selectors, CSS should also follow some logical nesting. Yet, CSS does not support nesting.

HTML元素具有帶有嵌套元素的邏輯樹狀結構。 要編寫結構化CSS選擇器,CSS還應遵循一些邏輯嵌套。 但是,CSS不支持嵌套。

Since you have Sass on your machine, writing nested CSS selectors is a piece of cake.

由于您的計算機上裝有Sass,因此編寫嵌套CSS選擇器很容易。

div{>h1{color: blue;&:hover{color: greenyellow;}}
}

Here we used two combinators, > and &. The purpose of a combinator is to explain the relationship between the elements. Our example will apply blue color to all h1 children of a div element. Another selector is the parent selector &. Use this selector for pseudo-classes like hover, focus, and active.

這里我們使用了兩種組合程序, & GT; 一個n d& 組合器的目的是解釋元素之間的關系。 我們的例子將應用于藍色? ll的H1孩子a div元素。 另一個選擇是父選擇o R&。 將此選擇器用于諸如懸浮,焦點和活動之類的偽類。

Compile once again to see the generated CSS blocks.

再次編譯以查看生成CSS塊。

//Processed CSS output
div h1 {color: blue;
}
div h1:hover {color: greenyellow;
}

遺產: (Inheritance:)

Yes — you can use the most popular OOP feature in Sass as well. Accruing the properties of one’s parent is Inheritance. But does it make any sense in CSS? And can we use them? We can! Believe me, and, I am sure you will adore this feature.

是的-您也可以使用Sass中最受歡迎的OOP功能。 繼承父母的財產是繼承。 但這在CSS中有意義嗎? 我們可以使用它們嗎? 我們可以! 相信我,我相信您會喜歡上此功能的。

Consider an application where you have various types of buttons. Save, Cancel, and Discard to name a few. You realize they share most of their characteristics. For example padding, font-size, margin. The only difference is the background color.

考慮一個具有各種按鈕類型的應用程序。 保存,取消和放棄僅舉幾例。 您會意識到它們具有大多數特征。 例如padding,font-size,margin。 唯一的區別是背景色。

Does it smell like inheritance? Yeah— You guessed it right! We can create a parent style for all these common properties and use them in child blocks.

它聞起來像繼承嗎? 是的,您猜對了! 我們可以為所有這些公共屬性創建父樣式,并將其用于子塊中。

%common-button{padding: 16px 8px;border: none;font-size: 18px;
}
.save{@extend %common-button;background-color: blue;color: white;
}
.cancel{@extend %common-button;background-color: goldenrod;color: white;
}

Here, the save and cancel buttons inherited their common properties from the common-button class. To declare a parent style, use the % sign. Use the @extend directive to inherit a child block.

在這里, savecancel按鈕從common-button類繼承了它們的公共屬性。 要聲明父樣式,請使用%符號。 使用@extend指令繼承子塊。

進口 (Import)

We have seen many amazing features that Sass provides. We were able to make styles more readable and structured. Still, it can grow and become hard to maintain.

我們已經看到了Sass提供的許多驚人功能。 我們能夠使樣式更具可讀性和結構性。 盡管如此,它仍會增長并變得難以維護。

Sass has a solution to this problem as well: a partial file. A partial file is a way to create small modular Sass files. The root Sass file can then import these modular files altogether. The naming convention for partial files is to prefix the file name with an underscore _.

Sass也有解決此問題的方法:部分文件。 部分文件是創建小型模塊化Sass文件的方法。 然后,Sass根文件可以完全導入這些模塊化文件。 部分文件的命名約定是在文件名前加上下劃線_

@import '_buttonpartial';
h1{color:blue;
}

Use the @import directive to include a partial file in the root Sass script.

使用@import指令在Sass根腳本中包含部分文件。

循環 (Loop)

Iteration is one of the most frequently used programming mechanisms. Sass script allows you to iterate over variables. You can use various directives like @for, @each and @while.

迭代是最常用的編程機制之一。 Sass腳本允許您遍歷變量。 您可以使用各種指令,例如@for@each@while.

$totalButton: 2;
@for $i from 1 through $totalButton{.button-#{$i} {width: 50px * $i;height: 120px / $i;}
}

The generated CSS block will have two classes with different styles.

生成CSS塊將包含兩個具有不同樣式的類。

//Processed CSS output
.button-1 {width: 50px;height: 120px; }
.button-2 {width: 100px;height: 60px; }

避免重復-使用食物處理器 (Avoid repeating — use a food processor)

A food processor is a kitchen appliance used to facilitate repetitive tasks in the preparation of food.

食物處理器是一種廚房用具,用于促進重復的食物準備工作。

We have used a Node.js package for compiling Sass files. It can be very annoying if you have to compile every time you make a change in the Sass script.

我們已經使用Node.js包來編譯Sass文件。 如果每次在Sass腳本中進行更改時都必須進行編譯,這可能會很煩人。

There is a fancy way to avoid repetitive compiling: a task runner. Visual Studio Code has a built-in task runner, but you can use any task runner of your choice. Gulp is another popular task runner. For compiling Sass script with Gulp, you would need gulp sass compiler instead.

有一種避免重復編譯的好方法:一項任務 跑步者。 Visual Studio Code具有內置的任務運行器,但是您可以使用任何選擇的任務運行器。 Gulp是另一個受歡迎的任務賽跑者。 為了使用Gulp編譯Sass腳本,您將需要gulp sass編譯器 。

Warning! Sass is only a development tool. Avoid shipping any library or file associated with Sass. You would never need them on a production server.

警告! Sass只是一個開發工具。 避免運送與Sass相關的任何庫或文件。 您將永遠不會在生產服務器上使用它們。

下一步是什么 (What’s next)

We’ve learned how to use preprocessors to create efficient and maintainable CSS blocks. We have seen various Sass features with examples. For more in-depth knowledge, jump to the official website.

我們已經學習了如何使用預處理器來創建高效且可維護CSS塊。 我們已經通過示例看到了各種Sass功能。 有關更多深入的知識,請訪問官方網站 。

I have also created a sample project. Go ahead, clone the project and start playing.

我還創建了一個示例項目。 繼續,克隆項目并開始播放。

翻譯自: https://www.freecodecamp.org/news/give-more-oompf-to-your-web-garnishes-with-preprocessors-in-sass-bd379226a114/

預處理器sass

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/394140.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/394140.shtml
英文地址,請注明出處:http://en.pswp.cn/news/394140.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

leetcode971. 翻轉二叉樹以匹配先序遍歷(dfs)

給定一個有 N 個節點的二叉樹,每個節點都有一個不同于其他節點且處于 {1, …, N} 中的值。 通過交換節點的左子節點和右子節點,可以翻轉該二叉樹中的節點。 考慮從根節點開始的先序遍歷報告的 N 值序列。將這一 N 值序列稱為樹的行程。 (回…

【BZOJ3932】[CQOI2015]任務查詢系統 主席樹

【BZOJ3932】[CQOI2015]任務查詢系統 Description 最近實驗室正在為其管理的超級計算機編制一套任務管理系統,而你被安排完成其中的查詢部分。超級計算機中的任務用三元組(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任務從第Si秒開始,在第Ei秒后結束&…

沖刺第一天

任務板 未開始 進行中已完成 劉曉杰:找回密碼界面 頁面風格優化 劉曉杰:滑動歡迎界面/加載界面 預計時間:5.5h 馮晨:找回密碼功能 發布動態界面 馮晨&#xff…

杭電1003 java_杭電ACM1003題怎么理解?

該樓層疑似違規已被系統折疊 隱藏此樓查看此樓http://acm.hdu.edu.cn/showproblem.php?pid1003Max SumTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 99208 Accepted Submission(s): 22835Problem DescriptionGiven…

ubtunu打開firefox_如何在Firefox(在Lubuntu中)中打開“apt”鏈接?

問題描述Ask Ubuntu上的許多答案都直接指向在Ubuntu軟件中心中在Xubuntu中打開的this之類的鏈接。在Lubuntu中,我收到此錯誤消息:在Firefox-Preferences中,應用程序看不到類似于apt的東西來關聯程序等。在Chromium或Opera中打開相同的鏈接&am…

web api json_有關使用JSON Web令牌保護無服務器API的速成班

web api jsonWhat a mouthful of a title. Wouldn’t you agree? In this walkthrough you’ll learn about securing your Serverless endpoints with JSON web tokens.這么大的頭銜。 你不同意嗎? 在本演練中,您將學習如何使用JSON Web令牌保護無服務…

【python之路14】發送郵件實例

1、發郵件的代碼 from email.mime.text import MIMETextfrom email.utils import formataddrimport smtplibmsg MIMEText(郵件內容,plain,utf-8)msg[from] formataddr([sunshuhai,25193qq.com])msg[to] formataddr([走人,252222222qq.com])msg[Subject] 主題server smtpli…

蘋果內存取證工具volafox

2019獨角獸企業重金招聘Python工程師標準>>> 蘋果內存取證工具volafox volafox是一款針對蘋果內存取證的專用工具。該工具使用Python語言編寫。該工具內置了overlay data數據,用戶可以直接分析蘋果10.6-10.11的各種內存鏡像文件。該工具提供28個子命令&a…

leetcode513. 找樹左下角的值(dfs)

給定一個二叉樹,在樹的最后一行找到最左邊的值。 代碼 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode(int x) { val x; }* }*/ class Solution {int maxL0,maxN0;pu…

Flutter實戰視頻-移動電商-45.詳細頁_說明區域UI編寫

45.詳細頁_說明區域UI編寫 pages/details_page/details_expain.dart 詳情頁面引用組件 效果展示: 最終代碼: import package:flutter/material.dart; import package:flutter_screenutil/flutter_screenutil.dart;class DetailsExplain extends Stateles…

win10java怎么運行_win10系統電腦怎樣才可以運行Java開發

展開全部安裝jdk,jdk下載地址:網頁鏈接 根據電腦系統選擇對應版本。32/64安裝時候,安裝路徑可以默認,也可以自己指定。我個人喜歡安裝到非系統盤,比如D盤。jdk安裝后,會彈出jre安裝界面,路徑同樣…

HTTP服務器的本質:tinyhttpd源碼分析及拓展

已經有一個月沒有更新博客了,一方面是因為平時太忙了,另一方面是想積攢一些干貨進行分享。最近主要是做了一些開源項目的源碼分析工作,有c項目也有python項目,想提升一下內功,今天分享一下tinyhttpd源碼分析的成果。ti…

monthdiff oracle_Oracle計算時間差函數

1、months_between(date1,date2) 返回兩個日期之間的月份的差值(1)、如果兩個日期月份內天數相同,或者都是某個月的最后一天,返回一個整數。否則,返回數值帶小數select months_between(sysdate,addtime)as diff_month from test62、interval 時間間隔…

洛谷——P1290 歐幾里德的游戲

P1290 歐幾里德的游戲 題目描述 歐幾里德的兩個后代Stan和Ollie正在玩一種數字游戲,這個游戲是他們的祖先歐幾里德發明的。給定兩個正整數M和N,從Stan開始,從其中較大的一個數,減去較小的數的正整數倍,當然&#xff0c…

passport身份驗證_了解如何使用Passport.js處理Node身份驗證

passport身份驗證by Antonio Erdeljac通過安東尼奧埃爾德雅克 了解如何使用Passport.js處理Node身份驗證 (Learn how to handle authentication with Node using Passport.js) Support me by reading it from its original source: ORIGINAL SOURCE通過閱讀原始來源為我提供支…

leetcode1448. 統計二叉樹中好節點的數目(dfs)

給你一棵根為 root 的二叉樹,請你返回二叉樹中好節點的數目。 「好節點」X 定義為:從根到該節點 X 所經過的節點中,沒有任何節點的值大于 X 的值。 代碼 /*** Definition for a binary tree node.* public class TreeNode {* int val;…

I/O模型系列之四:兩種高性能IO設計模式 Reactor 和 Proactor

不同的操作系統實現的io策略可能不一樣,即使是同一個操作系統也可能存在多重io策略,常見如linux上的select,poll,epoll,面對這么多不同類型的io接口,這里需要一層抽象api來完成,所以就演變出來兩…

python中序列類型和數組之間的區別_「Python」序列構成的數組

一、Python 標準庫的序列類型分為:容器序列:能夠存放不同類型數據的序列(list、tuple、collections.deque)。扁平序列:只能容納一種類型的數據(str、bytes、bytearray 和 array.array)。其中,容器序列存放的是它們所包含的任意類型…

如何使用EF Core在Blazor中創建級聯的DropDownList

介紹 (Introduction) In this article, we are going to create a cascading dropdown list in Blazor using Entity Framework Core database first approach. We will create two dropdown lists — Country and City. Upon selecting the value from the country dropdown, …

gcc/g++命令

參考:http://www.cnblogs.com/cryinstall/archive/2011/09/27/2280824.html 注意:gcc和g是linux系統下的編程常用指令,C語言文件用gcc,cpp文件用g。 1.預處理 g -E filename.cpp > filename.i 功能:輸出預處理后的…